vue2怎么让数组也变成响应式

这篇文章主要讲解了“vue2怎么让数组也变成响应式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue2怎么让数组也变成响应式”吧！

vue2让数组也变成响应式

之前的代码有个问题，就是操作数组数据的时候，不会触发set

letdata={name:'dean',age:30,level1:{level2:{level3_1:{level4:{value:'anna'}},level3_2:{level4:{value:'jing'}}}},languages:['javascript','java','c','pascal','python']}observe(data)functionobserve(target){//如果不是对象或者数组就直接return这也是地柜结束的条件if(typeoftarget!=='object'||target===null)return//遍历对象每个属性对每个属性添加响应式for(letkintarget){defineReactive(target,k,target[k])}}functiondefineReactive(target,key,value){//value子属性的值对其observe一下递归observe(value)//再让这个子属性添加响应式Object.defineProperty(target,key,{get(){returnvalue},set(newValue){if(newValue===value)return//设置新值也要observe一下observe(newValue)value=newValueconsole.log('更新视图')}})}console.log(data.level1.level2.level3_1.level4.value)data.level1.level2.level3_1.level4.value='jing'console.log(data.level1.level2.level3_1.level4.value)data.languages.push('ruby')console.log(data.languages)

我们可以这样修改来支持数组响应式操作：

letdata={name:'dean',age:30,level1:{level2:{level3_1:{level4:{value:'anna'}},level3_2:{level4:{value:'jing'}}}},languages:['javascript','java','c','pascal','python']}/***数组操作*/constoldArrayProto=Array.prototypeletnewArrayProto=Object.create(oldArrayProto)letarr=['push','pop','shift','unshift','splice','reverse','sort']arr.forEach(methodName=>{newArrayProto[methodName]=function(){console.log('自定义处理')//保留原来的处理结果returnoldArrayProto[methodName].call(this,...arguments)}})functionobserve(target){//如果不是对象或者数组就直接按照原值return这也是地柜结束的条件if(typeoftarget!=='object'||target===null)returntarget//遍历对象每个属性对每个属性添加响应式if(Array.isArray(target)){Object.setPrototypeOf(target,newArrayProto)}for(letkintarget){defineReactive(target,k,target[k])}}functiondefineReactive(target,key,value){//value子属性的值对其observe一下递归observe(value)//再让这个子属性添加响应式Object.defineProperty(target,key,{get(){returnvalue},set(newValue){if(newValue===value)return//设置新值也要observe一下observe(newValue)value=newValueconsole.log('更新视图')}})}observe(data)//console.log(data.level1.level2.level3_1.level4.value)//data.level1.level2.level3_1.level4.value='jing'//console.log(data.level1.level2.level3_1.level4.value)data.languages.push('ruby')console.log(data.languages)

vue2中的响应式原理

响应式原理主要就是通过数据劫持，依赖收集，派发更新的方式来实现的

1.数据劫持，vue2是通过Object。defineProperty来将对象的每一个属性转化成set，get。

其中修改对象的属性时就会触发set，使用对象的属性时就会触发get

2.依赖收集。就是在渲染视图时 将watcher和具体的属性，通过发布订阅者模式管理，这样数据改变之后就能更精准的更新视图

3.派发更新：它就是通过dep来执行watcher的notify方法

使用Object.defineProperty做响应式的缺点

有三点

1.深度监听，需要一次性递归到底，计算量比较大

2.描述符只有get和set，无法监听新增属性和删除属性的操作

3.无法原生监听数组

这三个缺点中，第二点是defineProperty本身API的缺陷，而第一点和第三点都是出于性能考虑而做的取舍

解决缺点的方法

当我们通过数组的方法去更改数组时或是直接删除data数据，数据并不能实现响应式，因为Object.defineProperty是没有办法处理属性删除和新增的

因此vue2的响应式，通过数组方法（prop，push），或是删除，vue是不能监听的

vue2中通过vue2中可以通过vue.datele和vue.set这些vue内置api来改变属性，实现响应式。

感谢各位的阅读，以上就是“vue2怎么让数组也变成响应式”的内容了，经过本文的学习后，相信大家对vue2怎么让数组也变成响应式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是主机评测网，小编将为大家推送更多相关知识点的文章，欢迎关注！

上一篇：phpstorm断点调试方法是什么

下一篇：Vue?iframe更改src后页面未刷新问题如何解决

---