vue中Object.defineProperty如何实现数据代理？

最新推荐文章于 2024-11-02 08:58:20 发布

前端_彭于晏

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量138

点赞数

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

本文链接：https://blog.csdn.net/qq_35452726/article/details/129147879

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

实现数据代理可以

使用Object.defineProperty如下：

<script>
   let obj1={x:1}
   let obj2={y:2}
   Object.defineProperty(obj2,'x',{
     get(){
       return obj1.x
     }
     set(value){
       obj1.x = value
     }
   })
</script>

vue中的数据代理：通过vm对象来代理data对象中属性的操作
vue中的数据代理优点：更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性都指定一个getter和setter
在getter/setter内部去操作(读/写)data中对应的属性

<body>
  <div id="root">
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      name:"张三",
      age:18
    }
  })
</script>