vue与数据代理

最新推荐文章于 2023-01-07 15:00:16 发布

bhots

最新推荐文章于 2023-01-07 15:00:16 发布

阅读量84

点赞数 1

分类专栏： vue JS ES6 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45180205/article/details/119775488

版权

JS 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

vue

29 篇文章 0 订阅

订阅专栏

ES6

22 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中的数据代理技术，通过Object.defineProperty实现对象属性的访问控制。以Vue框架为例，展示了如何通过代理来访问和修改data中的数据，强调了vm._data在Vue实例中的作用。在Vue中，data并不是直接存在于vm对象，而是通过代理方法处理，使得vm.name能够读取和更新_data中的name属性。

摘要由CSDN通过智能技术生成

数据代理就是通过一个对象代理对另外一个对象中属性的操作
意思就是在另外一个对象里通过代理的方式来操作另外一个对象的值
如图
在obj2里面添加了对obj的x的读写方法

	let obj={x:100}
    let obj2={y:100}

     Object.defineProperty(obj2,'x',{
         get(){
             return obj.x
         },
         set(value){
             obj.x=value
         }
     })

众所周知，对于vue实例，也是一个对象
所以vue读取data里面的数据也是通过getset的方法来读取的
如下面的代码，data不存在于vm里面，而是vm代理方法处理data里面的数据，
若是想看到data，就输出vm._data才看得到，输出vm.data是看不到任何东西的

//vue中的代理工作
     const vm=new Vue({
         el:'#root',
         data:{
             name:'大学东西',
             address:'us差不多很方便打包'
         }
     })
     console.log(vm);
     console.log(vm.name);//读取get
     //数据并不存在与vm.data里面,而是存在于_data里面
     console.log(vm._data.name);