详解vue的数据劫持以及操作数组的坑

2023-08-24 10:39:07 95

TL;DR

给data添加新属性的时候vm.$set(vm.info,'newKey','newValue')
data上面属性值是数组的时候，需要用数组的方法操作数组，而不能通过index或者length属性去操作数组，因为监听不到属性操作的动作。

安装和初使用vue

vue是构建用户界面的渐进式框架。所谓的渐进式：vue+components+vue-router+vuex+vue-cli可以根据需要选择相应的功能。
来串命令mkdirvue-apply;cdvue-apply;npminit-y;npmivue。
来一个html文件如下，浏览器瞄下~，浏览器控制台vm.msg=0再看下

{{msg}}

说说mvvmmvc

mvc其实是modelviewModel传统所有逻辑在controller,难以维护。用户输入=>控制器=>数据改变，如果数据变了需要获取dom，操作属性，再渲染到视图上。

mvvm其实是modelviewviewModel数据变化驱动视图。数据变了，不需要你获取dom，然后改变dom的内容。这边数据变了，vm负责监听，视图那边自动发生变化。最明显的是不需要document.querySelector之类的了。

vm的实质

上面说了vm负责让数据变了，视图能自动发生变化。这么神奇魔术背后的原理是Object.defineProperty。其实就是属性的读取和设置操作都进行了监听，当有这样的操作的时候，进行某种动作。来一个demo玩下。

//对obj上面的属性进行读取和设置监听
letobj={
name:'huahua',
age:18
}
functionobserver(obj){
if(typeofobj==='object'){
for(constkeyinobj){
defineReactive(obj,key,obj[key])
}
}
}
//get的return的值才是最终你读取到的值。所以设的值是为读取准备的。
//set传的参数是设置的值，注意这里不要有obj.name=newVal这样又触发set监听，会死循环的。
functiondefineReactive(obj,key,value){
Object.defineProperty(obj,key,{
get:function(){
console.log('你在读取')
//happy的话这边可以value++，这样你发现读取的值始终比设置的大一个，因为return就是读取到的值
returnvalue
},
set:function(newVal){
console.log('数据更新了')
value=newVal
}

})
}
observer(obj)
obj.age=2
console.log(obj.age)

在浏览器执行的时候，控制台随手也可以obj.name="hua1"类似的操作，发现都监听到了。但是如果更深一步，obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能监听到属性修改了。因为并没有将新的赋值对象监听其属性。所以函数需要改进。

需要在defineReactive的第一行加上observer(value)。设置值的时候如果是对象的话，也需要将这个对象数据劫持。同理，set那边也需要加这行。

functiondefineReactive(obj,key,value){
//注意这里！！！！！！！
observer(value)
Object.defineProperty(obj,key,{
get:function(){
returnvalue
},
set:function(newVal){
//注意这里！！！！！！！
observer(newVal)
console.log('数据更新了')
value=newVal
}

})
}

继续，如果obj.name=[1,2,3];obj.name.push(4)发现又没有通知了，这是因为Object.defineProperty不支持监听数组变化。所以需要重写数组上面的方法。话说，最近看了个文章，理论上也可以监听数组，但是性能消耗和收益不成正比，所以，vue就没去实现了。

//把数组上大部分方法重写了，这里不一一列举。但是如果你[1,2].length--，这是捕捉不到的
letarr=['push','slice','split']
arr.forEach(method=>{
letoldPush=Array.property[method]
Array.property[method]=function(value){
console.log('数据更新')
oldPush.call(this,value)
}
})

vue使用的时候注意的坑

正如上面的解释，vue2.0的底层约莫是这个逻辑，所以使用需要注意的点：

因为是一开始就数据劫持了。所以后来如果新绑定属性，是没有数据劫持的。如果需要调用vm.$set(vm.info,'newKey','newValue')，vm是vue的实例。

当属性值是数组，数组变化的时候，跟踪不到变化。因为数组虽然是对象，但是Object.defineProperty不支持数组，所以vue改写了数组的所有方法，当调用数组方法的时候，就调动变动事件。但是不能通过属性或者索引控制数组，比如length，index。

总结：data上，绑定所有属性避免后期加新属性。如果是数组，只能通过数组方法修改数组。如下例子，控制台vm.arr--发现视图并不会变化，vm.arr.push(4)就能变化

{{msg}}{{arr}}

以上所述是小编给大家介绍的vue的数据劫持以及操作数组的坑详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

详解vue的数据劫持以及操作数组的坑

热门推荐

随机推荐