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

• 查看项目运行情况