vue的响应式数据原理详解

74 阅读 0 评论 49 点赞

我是靠谱客的博主听话雪糕，最近开发中收集的这篇文章主要介绍vue的响应式数据原理详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue2的响应式数据的原理

在vue实例上添加 _data，指向data，然后通过_ data得到一个深度劫持的对象，然后再把组件实例需要的方法和 _ data添加到这个深度劫持的对象中，这样就得到了一个组件实例，当我们读写组件实例里的这些属性，就会触发object.defineproperty()的getter和setter，通过getter和setter来读写 _data的属性，下面是简单的代码实现。

function deepdefineobj(_data,isaddconfig=false,config={}){
let vc
// 组件实例
isaddconfig?vc={...config,_data} : vc=Array.isArray(_data)?[]:{}
// 深度劫持_data
for(let k of Object.keys(_data)){
Object.defineProperty(vc,k,{
get(){console.log('read',_data[k])
return _data[k]},
set(v){console.log('write',v)
_data[k]=v}
})
const isobj=Array.isArray(_data[k]) || Object.prototype.toString.call(_data[k])==='[object Object]'
if(isobj)
_data[k]=deepdefineobj(_data[k])
}
return vc
}
const _data=data={
// data选项的数据源
name:"xm",
age:18,
son:['a','b'],
wife:{name:'hh',age:18,sister:['e','f']}
}
const vc=deepdefineobj(_data,true,{$emit:'emit event'})
// 创建组件实例
console.log(vc)
console.log(data)
console.log('----------')
vc.age=20
// 触发响应式
console.log('----------')
vc.son[0]
// 触发响应式
vc.wife.sister[0]
// 触发响应式
console.log('----------')
vc.son.push('c')
//这里并没有触发son属性的写，虽然是改变原数组的方法，但数组地址没变

在vue2中改变原数组的方法，如：push、unshift具备响应式，无疑是vue做了特殊处理。在vue中，经过打印和使用我们可以发现，对于数组的劫持使用的并不是 defineProperty，push、unshift等方法具备响应式是因为vue对数组原型上的这些方法进行了重写

vue2响应式数据的限制分析

初始化时，vue根据data对象在组件实例上做了深度劫持，根据 Object.defineProperty（），当我们做读写操作时，vue可以捕获到，但如果是进行增删操作，vue无法捕获，这时数据就不具备响应式。

下面看一个例子：

<p>{{user}}</p>
<p>{{arr[0]}}</p>
<button @click="changeitem">通过索引值改变数组项以及在内存里向data添加数据，看看是否具备响应式</button>
<script>
data:{
user:{name:"xm",age:18},
arr:[1,2,3,4,5,6]
},
methods:{
changeitem(){
this.arr[0]=8
this.user.id="1"
}
}
</script>

点击按钮后，我们会发现页面两处都没有更新

解决方案：

对于数组：vue对数组的某些方法进行了处理，使得改变原数组的方法具备响应式，如：push、unshift

其他情况，可以使用this.$set和this.$delete方法，this.$set(target，key，value)

第一个参数是需要劫持增删的目标对象，第二个参数是要添加的属性名，第三个参数是属性名对应的属性值，使用后，target[key]也是具备响应式的

vue3完美的响应式数据

在vue3里解决了vue2响应式数据限制的所有问题，无论是对象还是数组不再需要使用$set和$delete，也不再需要依赖于重写的数组方法来达到数组的响应式了。下面是简单代码实现

function deepproxy(_data){
for(let [k,v] of Object.entries(_data)){
const isobj=Array.isArray(v) || Object.prototype.toString.call(v)==='[object Object]'
if(isobj) _data[k]=deepproxy(v)
}
const data=new Proxy(_data,{
get (_data,k,proxy){console.log('read',_data[k]);return Reflect.get(_data,k)},
set (_data,k,v,proxy){console.log('write||add',v);Reflect.set(_data,k,v)},
deleteProperty(_data,k,proxy){console.log('delete',k);return Reflect.deleteProperty(_data,k)}
})
return data
}
const _data={
// 组件数据源
name:"xm",
age:18,
son:['a','b'],
wife:{name:'hh',age:18,sister:['e','f']}
}
const data=deepproxy(_data)
// 创建响应式数据
console.log(data)
console.log('---------')
data.son
// 触发响应式
data.wife.sister
// 触发响应式
console.log('---------')
data.wife.sister[2]='h'
// 触发响应式
console.log('---------')
data.toString()
// 触发响应式
//read function toString() ,这里可以看到，proxy可以劫持到原型上属性的增删改查
//console.log(reactive(_data))
// Proxy {name: 'xm', age: 18}
//使用 Reflect 操作对象的属性，是因为该操作如果出错不会阻塞程序运行，而直接操作对象属性的方式出错会阻塞程序