Vue数据代理的原理

一、Object.defineProperty方法

我们可以使用一个Object.defineProperty方法给一个对象添加属性,并对该属性进行权限设置

语法格式如下:

Object.defineProperty(对象 , "属性名" , { // 配置项 })

javascript 复制代码
let Person = {
    name:"寻霖",
    age:18
}
Object.defineProperty(Person, "gender", {
    value:"女",
    enumerable:true,  // 控制属性是否可以枚举,默认值是false
    writable:true,  // 控制属性是否可以被修改,默认值是false
    configurable:true  // 控制属性是否可以被删除,默认值是false
})

我们可以利用Object.defineProperty方法中的 get() 和 set() 配置项连接一个变量和一个对象中的属性值,也就是变量改变属性值也变化,属性值变化对象也变化,就和MVVM模型很像。

javascript 复制代码
let num = 18;
let Person = {
    name:"寻霖",
}
Object.defineProperty(Person, "age", {
    // 当有人读取Person中的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    get() {
        console.log("age属性被读取了");
        return num;
    },
    // 当有人修改Person中的age属性时,set函数(setter)就会被调用,且会收到修改后的值
    set(value) {
        console.log("age属性被修改了,且修改值为"+value);
        num = value;
    }
})

二、理解数据代理

数据代理就是一个对象代理对另一个对象中属性的操作(读/写)。

比如在如下代码中,我们在obj2对象中代理obj1对象的x属性:

javascript 复制代码
let obj1 = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2, "x", {
    get() {
        return obj1.x;
    },
    set(value) {
        obj1.x = value;
    }
})

三、Vue中数据代理的原理

首先我们先了解数据代理的作用:使我们编写代码简便

我们的Vue身上之所以有在data中编写的属性,就是使用的数据代理

我们在data中编写的数据全被Vue存在了_data中:

然后Vue通过Object.defineProperty方法使一个对象(Vue对象)在另一个对象(_data对象)中完成对数据的代理:

我们可以进行简单的验证:

这么做就是为了我们在编写模板字符串时只需要写 {{name}} 而不是 {{_data.name}}

相关推荐
hj5914_前端新手2 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net