vue3.0 响应式原理

最新推荐文章于 2023-09-27 10:38:26 发布

null-hands

最新推荐文章于 2023-09-27 10:38:26 发布

阅读量104

点赞数

分类专栏： vue3 VUE + ElementUI JS 文章标签： vue

本文链接：https://blog.csdn.net/BettermEJS/article/details/120519070

版权

JS 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

VUE + ElementUI

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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)
    }
})