Vue3 Vue3中的响应式原理
一、vue2.x的响应式
1.实现原理：
(1).对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
(2).数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
Object.defineProperty(data,'count',{
get(){}
set(){}
}
2.存在问题：
(1).新增属性、删除属性，界面不会更新。
(2).直接通过下标修改数组，界面不会自动更新。
具体Vue2响应式解析参考文章Vue 数据监视-CSDN博客。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue2响应式原理</title>
</head>
<body><script>let person ={name:'张三',age:18}//模拟Vue2中的响应式let p={}Object.defineProperty(p,'name',{get(){console.log('有人访问了name')return person.name},set(value){console.log('有人修改了name')person.name = value}})Object.defineProperty(p,'age',{get(){console.log('有人访问了age')return person.age},set(value){console.log('有人修改了age')person.age = value}})</script>
</body>
</html>二、vue3.0的响应式
1.实现原理：
(1).通过Proxy（代理）：拦截对象中任意属性的变化，包含：属性值的读写、属性的添加、属性的删除等。
(2).通过Reflect（反射）：对源对象的属性进行操作。
(3).MDN文档中描述的Proxy与Reflect：
(1).Proxy：Proxy - JavaScript | MDN
(2).Reflect：Reflect - JavaScript | MDN
//模拟Vue3中的响应式
const p = new Proxy(person,{// 拦截读取属性值
get(target,propName){
return Reflect.get(target,propName)
},// 拦截设置属性值或添加新属性
set(target,propName,value){
Reflect.set(target,propName,value)
},// 拦截删除属性
deleteProperty(target,propName){
return Reflect.deleteProperty(target,propName)
}
})
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3响应式原理</title>
</head>
<body><script>let person ={name:'张三',age:18}//模拟Vue3中的响应式const p = new Proxy(person,{get(target,propName){// console.log('@@@@',target,propName)// return target[propName]return Reflect.get(target,propName)},set(target,propName,value){// console.log(target,propName,value)// target[propName] =valueReflect.set(target,propName,value)},deleteProperty(target,propName){// return delete target[propName]return Reflect.deleteProperty(target,propName)}})</script>
</body>
</html>