Vue3响应式的原理

Vue3中实现 响应式原理

Vue3中使用ES6中的Pro x y来实现响应式,并通过Re fl e ct 操作源对象内部的数据

模拟Vue3响应式

1. 准备 环境

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <link rel="icon" href="/favicon.ico" /&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

2 js 创建 person 对象


<script>
    let person = {
        name:"张三",
        age: 18
    }
</script>

3 proxy 对象 使用

new Pro x y(object,handler)
object 要代理的对象
h andler 处理动作

const p = new Proxy(person,{
        get(target,propName){
            console.log("获取"+propName+"属性值")
            return target[propName]
        },
        set(target,propName,value){
            console.log(propName+"属性值改变了")
            target[propName] = value;
        },
        deleteProperty(target, propName) {
            console.log(propName+"属性值删除了")
            return delete target[propName]
        }
    });

4.使用Reflect对象修改值

const p = new Proxy(person,{
        get(target,propName){
            console.log("获取"+propName+"属性值")
            //return target[propName]
            return Reflect.get(target,propName)
        },
        set(target,propName,value){
            console.log(propName+"属性值改变了")
            //target[propName] = value;
            Reflect.set(target,propName,value)
        },
        deleteProperty(target, propName) {
            console.log(propName+"属性值删除了")
            //return delete target[propName]
            return Reflect.deleteProperty(target,propName)
        }
    });