vue 数据更改能触发视图更改原理（Object.defineProperty（）方法）

vue 数据更新  视图自动更新的前提 是这个数据被vue劫持了，数据应用到了视图上（对应数据 有get和set），当浏览器在渲染的时候，会把vue中的变量劫持，对于obj一个对象来说，它里面已经定义过的属性，在渲染的时候就会被劫持（就是被vue设置了get和set），而之后通过其他方式再往obj中添加属性的时，它并不具有这两个方法，所以你即使添加了属性，也不会触发视图 更改（当然前提是你在视图应用了这个属性）

数据劫持：通过Object.defineProperty方法，可以给对象中的数据定义属性

    let obj = {};
    let temp = 123;
    Object.defineProperty(obj,'qqq',{
      // value:'小明',
      // enumerable:true,// 是否可枚举  （能不能循环到）
      // configurable:false,// 是否可删除 delete
      // writable:true // 是否可写
      get(){
        // 当qqq这个属性被调用的时候  会触发这个函数；
        console.log('get执行了')
        return temp // 调用qqq这个属性时 拿到的值 就是这个函数的返回值
      },
      set(val){
        // 当给qqq这个属性设置值的时候   会触发这个函数
        // val 就是给qqq设置的这个值
        console.log('set执行了')
        console.log(val)
        temp = val;
        // obj.qqq = val;
      }
    });

例 ：给对象新增属性的时候 不会触发视图的更新， 但是 数据会改变；

为什么会出现这种情况？vue实例中定义的变量，浏览器进行渲染的时候，会给数据设置get方法和set方法，进行数据劫持，而新添加的变量并没有这两个方法，所以改变数据，并不会引起视图的改变

解决方法：

1- 增加一个无关变量,每次修改数据的时候， 把这个无关变量更新了(为了触发视图更新)
2- 一开始你就把所有的属性都写上去
3- 整个对象的替换，每一个后代属性都会被劫持； 可以使用 Object.assign()
4- 官方提供的方法 vm.$set(对象，属性名，属性值)

数组变异方法简单来所，数组变异方法修改vue中数据可以使视图自动更新

数组方法push ， pop  ， unshift  ，shift ，reverse ，splice ， sort  在vue中 称为数组的变异方法

普通数组方法修改vue中的数据，并不会引起视图更新

forEach ， map ， filter ， some ， every，  find ， reduce ， includes ...