• Vue数据代理的原理


    一、Object.defineProperty方法

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

    语法格式如下:

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

    1. let Person = {
    2. name:"寻霖",
    3. age:18
    4. }
    5. Object.defineProperty(Person, "gender", {
    6. value:"女",
    7. enumerable:true, // 控制属性是否可以枚举,默认值是false
    8. writable:true, // 控制属性是否可以被修改,默认值是false
    9. configurable:true // 控制属性是否可以被删除,默认值是false
    10. })

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

    1. let num = 18;
    2. let Person = {
    3. name:"寻霖",
    4. }
    5. Object.defineProperty(Person, "age", {
    6. // 当有人读取Person中的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    7. get() {
    8. console.log("age属性被读取了");
    9. return num;
    10. },
    11. // 当有人修改Person中的age属性时,set函数(setter)就会被调用,且会收到修改后的值
    12. set(value) {
    13. console.log("age属性被修改了,且修改值为"+value);
    14. num = value;
    15. }
    16. })

    二、理解数据代理

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

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

    1. let obj1 = {x:100};
    2. let obj2 = {y:200};
    3. Object.defineProperty(obj2, "x", {
    4. get() {
    5. return obj1.x;
    6. },
    7. set(value) {
    8. obj1.x = value;
    9. }
    10. })

    三、Vue中数据代理的原理

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

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

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

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

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

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

  • 相关阅读:
    调整Windows键盘上只能看到拼音而无法看到实际的文本以及关闭输入法悬浮窗方法
    Redis支撑秒杀场景的关键技术和实践都有哪些?
    Javaweb:HTTP协议与Web服务端开发环境(一)
    C. Array Elimination-- Codeforces Round #751 (Div. 2)
    React.lazy与Suspence实现延迟加载
    神经网络的正则化
    C++宏函数和内联函数
    Linux检查端口nmap
    CIE A-Level化学Paper1真题讲解(6)
    js serialport 串口通讯
  • 原文地址:https://blog.csdn.net/XunLin233/article/details/133714989