FE_Vue学习笔记 - 数据代理

Vue中的数据代理是一种机制,通过它,Vue实例(vm)可以代理其数据对象(data)中的属性操作。这种代理的原理主要是通过Object.defineProperty()方法,将data对象的每个属性都添加到vm对象上,并为这些属性定义getter和setter方法。在getter和setter内部,我们可以进行对data中对应属性的读取和修改。通过这种方式,Vue实例可以方便地代理其数据对象中的属性操作,避免了直接操作data对象,简化了代码并提高了可维护性。

让我们用一个简单的案例来解释这个原理。

首先,我们创建一个简单的Vue实例,其数据对象(data)包含一个属性(name):

const vm = new Vue({  
  data: {  
    name: '孙悟空'  
  }  
});

在这个实例中,我们可以使用Object.defineProperty()方法,将data对象中的name属性代理到vm对象上:

const vmProxy = new Proxy(vm, {  
  get(target, key) {  
    if (key in target.data) {  
      return target.data[key];  
    } else {  
      return target[key];  
    }  
  },  
  set(target, key, value) {  
    if (key in target.data) {  
      target.data[key] = value;  
    } else {  
      target[key] = value;  
    }  
  }  
});

在这个代理中,get和set方法被定义成对target(原始vm对象)和target.data的属性进行访问和修改。因此,当我们访问vmProxy对象的name属性时,实际上是在访问vm对象的data对象的name属性:

console.log(vmProxy.name);  // 输出 '孙悟空'

如果我们修改vmProxy对象的name属性,那么也会修改vm对象的data对象的name属性:

vmProxy.name = '猪八戒';  
console.log(vm.data.name);  // 输出 '猪八戒'

这就是Vue中的数据代理的基本原理。通过这种方式,Vue实例可以方便地代理其数据对象中的属性操作,使得我们不需要直接操作data对象,简化了代码并提高了可维护性。同时,通过getter和setter方法,我们还可以实现数据的双向绑定,使得数据的修改更加方便。

<body>
<div id="app">
    <h2>姓名:{{ name }}</h2>
    <h2>性别:{{ sex }}</h2>
</div>
</body>

<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            sex: '男'
        }
    })
</script>
</html>

此时,在控制台输出vm,可以看到,属性都做了数据代理,也就是通过getter和setter访问,而data中的数据,又是通过_data拿到的,修改data中的属性,也需要经过_data,也就是说_data其实就是data的数据代理:
FE_Vue学习笔记 - 数据代理_第1张图片

Vue中的数据代理是通过vm对象来代理data对象中属性的操作(读/写)。在Vue实例化时,会将data对象中的所有属性收集到vm._data中,属性值不再直接给出,而是通过响应式getter获取,当data中数据改变时,就会调用响应式setter,导致重新解析模板,然后生成新的虚拟DOM进行新旧DOM对比,最后更新页面。因此,通过vm._data可以获取到代理后的data对象数据。

你可能感兴趣的:(VUE相关知识学习,vue.js,学习,笔记)