Vue全流程--数据代理的理解以及在Vue中的应用

数据代理定义

数据代理就是通过一个数据对象代理对另一个对象中的属性进行读/写

需要用到的基础知识

js的Object.defineProperty函数补充：（请大致读完后再看下文）

数据代理理解（案例）

函数运行结果

从上面的案例中我们可以看出

1、temp2没有定义x值，但是在控制台中却有输出 。原因：Object.defineProperty函数中的get察觉到temp2被读取，就返回temp1的值给x,这个时候temp2就有了x值

2、temp2修改了x值，temp1也跟着修改了x值。原因：Object.defineProperty函数中的set察觉到temp2值被修改，就令temp1.x=修改后的值。

数据代理在Vue中的应用 

先看代码内容

    
    
    
    
    


    

     
名字：{
  
  {name}}
     
性别:{
  
  {sex}}
    
   
    

利用控制台查看创建的const app =new Vue实例 app的内容，可以看出实例app有着我们所需要的所有的内容。我们可以发现name,sex,url各有一对get和set。

通过“修改” app.data.name的值，我们的页面中的值也发生了变化。这里用到的就是set函数的功能

 

由此我们就可以理解为什么我们在app实例中修改数据，

...

中 也能够即时的修改。

此外。

...

中 修改到页面中的数据修改有利用了一次get、set队。当然大家理解就好这里不再讲解