vue中修改数据不生效，页面不刷新

一、vue中数据类型

包括：基本类型，对象，数组

二、vue数据侦听简易理解

在vue2中，是通过Object.definedPropety()来进行数据代理。

我们配置在const vm = new Vue({})中的deta会变成 vm自身上的属性，也会存在于vm._data中，此时data中对应的每一个属性都会有getter和setter，数据改变后模板重新解析，就依赖于setter对数据的侦听。

从上图黑色部分可以看到，age是对象，hobbies是字符串数组，friends是对象数组，他们本身都有getter和setter来实现响应式。

1、类型为基本数据类型：

此时，该属性在vm上有直接的getter和setter，可以直接修改

vm.name="xiaoming"

2、类型为对象

 此时对象的每个属性都有对应个getter和setter，也可以实现响应式

 3、类型为数组

 在js中，想要操作数组中的某个元素，我们可能会通过索引来操作，然而，从截图中，我们发现没有对应元素索引值的getter和setter方法，因此我们再通过数组索引值修改数据，就不会触发模板解析，从而就不会刷新页面。

 三、数据更新后，页面不刷新的可能原因

1. 初始化时data中不存在该属性

通过 vm.xxx=yyy / vm.xxx.yyy="abc"方式添加，该属性为非响应式。想要添加响应式数据，需要借助vue提供的set方法：

Vue.set(vm.xxx, 'yyy', 'zzz')  或者  vm.$set(vm.xxx, 'yyy', 'zzz')

也可以在初始化时的data数据中添加目标属性

注意：data中是不可直接用Vue.set()方式添加属性的 即 Vue.set(vm, 'yyy', 'zzz')  或者  vm.$set(vm, 'yyy', 'zzz')是不合法的，控制台会报错，我们只能往已存在的属性中增加属性。

2. 通过索引值修改数组元素

错误方式：

vm.hobbies[0]=’上班’

vm.friends[0]={name:’henmeimei’,age=”19”}

正确修改方式：

1、通过数组的pop(末尾删除)/push(末尾添加)/shift(开头删除)/unshift(开头添加)/reverse(反转)/sort(排序)/splice(起始位置，删除数量，插入元素)方法操作

2、Vue.set(vm.items, indexOfItem, newValue)     

      vm.$set(vm.items, indexOfItem, newValue)

3、通过其他方式（filter/map/...）修改数组，并重新赋值给原数组