Vue06-数据代理

最新推荐文章于 2024-01-10 20:23:08 发布

MarxistVive

最新推荐文章于 2024-01-10 20:23:08 发布

阅读量98

点赞数

分类专栏： Vue2笔记文章标签： vue.js javascript 前端数据代理

本文链接：https://blog.csdn.net/A1066223647/article/details/125022710

版权

Vue2笔记专栏收录该内容

41 篇文章 1 订阅

订阅专栏

Vue06-数据代理

文章目录

Vue06-数据代理

一、回顾Object.defineproperty

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>回顾Object.defineproperty方法</title>
   </head>
   <body>
      <script type="text/javascript" >
         let number = 18
         let person = {
            name:'张三',
            sex:'男',
         }

         Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
               console.log('有人读取age属性了')
               return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
               console.log('有人修改了age属性，且值是',value)
               number = value
            }

         })

         // console.log(Object.keys(person))

         console.log(person)
      </script>
   </body>
</html>

二、数据代理定义

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>何为数据代理</title>
   </head>
   <body>
      <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
      <script type="text/javascript" >
         let obj = {x:100}
         let obj2 = {y:200}

         Object.defineProperty(obj2,'x',{
            get(){
               return obj.x
            },
            set(value){
               obj.x = value
            }
         })
      </script>
   </body>
</html>

三、Vue中的数据代理

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>Vue中的数据代理</title>
      <!-- 引入Vue -->
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
      <!-- 
            1.Vue中的数据代理：
                     通过vm对象来代理data对象中属性的操作（读/写）
            2.Vue中数据代理的好处：
                     更加方便的操作data中的数据
            3.基本原理：
                     通过Object.defineProperty()把data对象中所有属性添加到vm上。
                     为每一个添加到vm上的属性，都指定一个getter/setter。
                     在getter/setter内部去操作（读/写）data中对应的属性。
       -->
      <!-- 准备好一个容器-->
      <div id="root">
         <h2>学校名称：{{name}}</h2>
         <h2>学校地址：{{address}}</h2>
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
      
      const vm = new Vue({
         el:'#root',
         data:{
            name:'尚硅谷',
            address:'宏福科技园'
         }
      })
   </script>
</html>