一、定义

vue是通过Object.defineProperty()来实现双向数据绑定的，它作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

  1. Object.defineProperty(obj, prop, desc)
  1. obj 需要定义属性的当前对象
  2. prop 当前需要定义的属性名
  3. desc 属性描述符

二、描述符属性配置

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

  1. Object.defineProperty(obj：对象, prop：key, descriptor:属性和方法)
  2. let obj = {}
  3. Object.defineProperty(obj,'a',{
  4.     configurable: true    //是否允许删除
  5.     enumerable：true      //是否允许枚举
  6.     value：undefined      //就是value值
  7.     writable：true        //是否允许赋值   
  9.     get() {}    //获取的return的值 
  10.     set(newVal) {}    //修改的时候执行  newVal就是最新的值
  11. })
  1. //区别在于单个截止和多个劫持
  2. Object.defineProperties(obj,{
  3.     a:{
  4.         get() {
  5.             //需要return 否则会返回 undefined
  6.             return 1
  7.         }
  8.         set(newVal) {
  9.             //newVal 是给属性 a 最新赋的值
  10.             //可以执行函数、dom操作等一些方法
  11.         }
  12.     },
  13.     b:{
  14.         get() {}
  15.         set() {}
  16.     }
  17. })

三、数据读写

读数据，会触发 get，并且 get 内部需要返回数据，才能读取到数据
但是由于 Object.defineProperty 的缺陷，直接在 return 后面 返回 data.name,会进入死循环，所以需要通过一个全局变量进行管理

  1. const data = {
  2.   name: '张三',
  3.   age: 14
  4. }
  6. let value = data.name
  8. Object.defineProperty(data, 'name', {
  9.   get() {
  10.     console.log('读数据了')
  11.     return value
  12.   },
  13.   set(val) {
  14.     console.log('写数据了')
  15.   }
  16. })
  18. console.log(data.name)

四、写数据

  1. const data = {
  2.   name: '张三',
  3.   age: 14
  4. }
  6. let value = data.name
  8. Object.defineProperty(data, 'name', {
  9.   get() {
  10.     console.log('读数据了')
  11.     return value
  12.   },
  13.   set(val) {
  14.     console.log('写数据了' + val)
  15.     value = val
  16.   }
  17. })
  19. console.log(data.name)
  20. data.name = '赵四'
  21. console.log(data.name)
  1. // 打印结果
  2. 读数据了
  3. 张三
  4. 写数据了赵四
  5. 读数据了
  6. 赵四

五、单层数据响应

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=device-width, initial-scale=1.0"
  8.     />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <div>
  13.       <p id="name"></p>
  14.       <p id="age"></p>
  15.     </div>
  16.     <script>
  17.       // 定义数据
  18.       const data = {
  19.         name: '张三',
  20.         age: 19
  21.       }
  23.       // 同步视图的方法
  24.       function setView() {
  25.         document.getElementById('name').innerHTML = data.name
  26.         document.getElementById('age').innerHTML = data.age
  27.       }
  28.       setView()
  30.       // 利用循环对数据进行监听
  31.       Object.keys(data).forEach(key => {
  32.         // 利用外部数据进行数据的读写控制
  33.         let getValue = data[key]
  34.         Object.defineProperty(data, key, {
  35.           // 读数据
  36.           get() {
  37.             return getValue
  38.           },
  39.           // 写数据
  40.           set(val) {
  41.             getValue = val
  42.             setView()
  43.           }
  44.         })
  45.       })
  46.     </script>
  47.   </body>
  48. </html>

六、数据无法响应的情况

https://cn.vuejs.org/v2/guide/reactivity.html

对象：对象新增的数据无法响应