Vue3响应式的原理

最新推荐文章于 2024-07-02 10:39:52 发布

*郑*

最新推荐文章于 2024-07-02 10:39:52 发布

阅读量524

点赞数 11

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42202992/article/details/134753032

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

Vue3响应式的原理

Vue3中实现响应式原理

Vue3中使用ES6中的Proxy来实现响应式,并通过Reflect操作源对象内部的数据

模拟Vue3响应式

1. 准备环境

创建一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <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 Proxy(object,handler)
object 要代理的对象
handler 处理动作

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