vue 数据更新但页面不刷新的情况

• 1. Vue 无法检测创建时 data 中没有的数据
• 1. Vue 无法检测对象 property 的添加或移除
• 3. Vue 不能检测通过数组索引直接修改一个数组项，也不能检测数组长度变化

https://www.cnblogs.com/houxianzhou/p/13645294.html

1. Vue 无法检测创建时 data 中没有的数据

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

<template>
  <div @click='getData'>
    {{xfghdfgh}}
  <div/>

</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    getData (data) {
      this.xfghdfgh = 2
    },
  }
}
</script>

1. Vue 无法检测对象 property 的添加或移除

原因：由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。 跟上面一样，因为对象里面新添加的属性，初始不在 data 里。

<template>
  <div @click='getData'>
  <!--点击也不显示内容-->
    {{a.c}}
  <div/>

</template>
<script>
export default {
  data () {
    return {
      a:{b:1}
    }
  },
  methods: {
    getData (data) {
      this.a.c = 2 //数据改变不刷新
      // Vue.set(this.a, c, 2)  这样写就能刷新
    },
  }
}
</script>

3. Vue 不能检测通过数组索引直接修改一个数组项，也不能检测数组长度变化

原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items.length = 2 // 不是响应性的