Vue3的响应式底层实现原理是什么
vue3的底层是通过
ES6的新语法醣Proxy和ES5的Object.defineproperty来实现响应式设计的
尝试自己手动写一份数据响应式-基于 Proxy
定义需要实现响应式的数据信息
let dataInfo = {
effectName: '测试Proxy响应式',
changeTimes: 1,
updated: false
}利用
Proxy对dataInfo实现响应式绑定
let proxyData = new Proxy(dataInfo,{
// 读取数据的某个key的值
get(data,key){
console.log读取data的${key}的值)
return data[key]
},
// 修改数据的某个key的值为一个新的值
set(data,key,val){
console.log更改dataInfo的${key}的值，新的值为${val})
dataInfo[key] = val;
return dataInfo[key]
},
// 删除数据的某个key
deleteProperty(data,key){
console.log删除dataInfo的${key})
return delete dataInfo[key]
}
})
浏览器查看效果-执行数据定义
获取
proxyData的effectName的值；更改proxyData的effectName的值；删除proxyData的effectName
执行项目搭建
创建项目包
npm create vite vue3Test --template vue-ts安装依赖
npm install执行项目启动
npm run dev查看项目运行情况
