vue3.0 响应式原理

原创于 2021-09-27 22:42:40 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

JS 同时被 3 个专栏收录

4 篇文章

订阅专栏

VUE + ElementUI

2 篇文章

订阅专栏

1 篇文章

订阅专栏

本文深入探讨Vue3.0的响应式原理，重点讲解如何利用Proxy捕获对象属性变化，以及Reflect在实现响应式过程中的作用。通过示例代码，展示了get、set和deleteProperty等方法在拦截读取、修改和删除属性时的使用，揭示了Vue3.0响应式系统的底层机制。

VUE3.0 响应式原理

通过Proxy(代理): 拦截对象中任意属性的变化，包括属性的读取、添加、删除、修改。
通过Reflec(反射): 对源对象的属性进行操作
Reflect快速了解

let person = {
    name: '张三',
    age: 25
}
const p = new Proxy(person,{
    // 读取p的属性 prop时调用
    get(target,prop){
        //return target[prop]
        return Reflec.get(target,prop)
    },
    // 修改、新增p的某个属性值调用
    set(target,prop,value){
        //target[prop] = value
        return Reflec.set(target,prop,value)
    },
    // 删除p的某个属性时调用，返回删除结果 true | false
    deleteProperty(target,prop){
        //return delete target[prop]
        return Reflec.deleteProperty(target,prop)
    }
})