上篇讲到vue的数据代理,这篇来讲一下我对数据劫持的理解。
数据劫持的通俗理解就是数据监视,当我们修改vue实例对象中的data属性中的值时,页面中的数据会立马改变,这又是如何检测到的呢?
数据劫持:就是vue通过Object.defineProperty对data中的属性添加了set,get方法,并在调用该方法时为该方法添加一些操作来劫持对象属性的操作。
vue监视数据的原理:
Vue数据绑定之前,通过observe每个对象的属性,添加到订阅器dep中,当数据发生变化的时候发出一个notice,即消息的订阅与发布。
vue监视对象中的数据 :
通过setter实现监视,且要在new Vue时就传入要监测的数据。
(1)对象中后追加的属性,Vue默认不做响应式处理。
(2)如需给后添加的属性做响应式,需使用set方法:
代码如下:
<div id="root">
<h1>姓名:{{person.name}}</h1>
<h1>地址:{{person.sex}}</h1>
</div>
<script>
Vue.config.productionTip=false;// 阻止vue在启动时生成自动提示
let vm=new Vue({
el:'#root',
data:{
person:{
name:'rose',
}
},
methods:{
addSex(){
// vue实例对象中的方法
// this.$set(this.person,'sex','女')
// Vue自身的方法
Vue.set(this.person,'sex','女');
}
},
mounted(){
this.addSex();
}
})
</script>
Vue给sex属性添加了get,set方法。
vue监视数组中的数据
通过包裹数组更新元素的方法实现,本质就是做了两件事:
1.调用原生对应的方法对数组进行更新,也就是做了劫持修改。
2.重新解析模板,进而更新页面。
Vue想要修改数组中的某个元素,只能使用数组原有的API进行修改。
当Vue在observer数据阶段会判断如果是数组的话,就给数组原型上的API进行了劫持,只要使用数组方法修改,vue就能检测到数据的变化,进而调用get,set方法。
API如下:
push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等。
特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!
希望这篇文章对你有所帮助,欢迎更正或者补充~