13.Vue监视数据的原理

1. vue会监视data中所有层次的数据
2.如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据.
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target. propertyName/index. value) 或
vm.$set(target. propertyName/index. value )

    <button @click="addSex">添加性别，默认为'男'</button>

methods:{
      addSex(){
        // Vue.set(this.stu,'sex','男')
        this.$set(this.stu,'sex','男')
      },
}

3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新.
(2).重新解析模板,进而更新页面。
4.在Vue修改数组中的某个元素定要用如下方法:
1.使用这些API:push()、pop()、 shift()、 unshift()、 splice()、sort()、 reverse()，也就是说这些方法都有一个特点，就是会改变原数组。

addHobby(){
        // this.stu.hobby.unshift('开玩笑')
        this.stu.hobby.push('开玩笑')
      },
      updateHobby(){
        // this.stu.hobby.splice(0,1,'study')
   
      },

但是有的方法会变更调用了这些方法的原始数组，而它们不会变更原始数组，总是返回一个新数组。例如 filter()、concat() 和 slice()。这时候可以可以用新数组替换旧数组。

removeSmoke(){
        this.stu.hobby = this.stu.hobby.filter((h)=>{
          return h!== '抽烟'
        })
}

2.Vue.set()或vm.$set()
特别注意: Vue.set() 和vm.$set() 不能给vm（data）或vm（_data）的根数据对象添加属性! ! !

数据劫持：

指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。

• 数据劫持就是将vue代码里我们写的data加工了一下，让每个属性有了getter和setter
• 这就可以实现数据变了，改变页面
• 先看看我们写的data和加工之后的data有什么区别

 

• 实际上vue通过监听者observer来监听data中的数据，这个getter和setter就是监听者里面的方法
• getter就是监听者获取data中数据的，setter则是监听当数据发生变化的时候执行操作的；
• 当修改属性的时候，setter被调用，在setter方法中就会让订阅者执行重新解析模板的操作，从而改变了页面