vue响应式原理介绍

相信用过vue的都知道，vue中data中定义的数据会随着我们通过方法改变该数据的同时，页面上相关此数据的也会相应的刷新，实现响应式数据。可你知道它是如何实现这一功能的吗？下面让我们来了解了解它是如何做到这神奇操作的。

1.Object.defineProperty 监听修改读取数据

Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
第一个值传入要修改的对象
第二个值传入该对象中要修改的key
第三个值是一个对象，里面有set 和get两种方法 set为值发生修改是所做的操作 get为读取改值时的操作
默认配置如下

 //   入参的三个值， 
        // 第一个值传入要修改的对象， 
        // 第二个值传入该对象中要修改的key，
        // 第三个值是一个对象，里面有set 和get两种方法 set为值发生修改是所做的操作 get为读取改值时的操作
        
            Object.defineProperty(obj, key, {
                set(newValue){
                    value = newValue
                    console.log('监听key值的变化', key, value)
                },
                get(){
                    console.log('获取key值的变化', key)
                    return value
                }
            })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在我们来研究下vue是如何利用Object.defineProperty 监听修改读取数据的

我们创建一个对象，并利用Object.keys（）将对象中的key返回到一个数组中，并对该数组forEach遍历
将key对应值先取过来，对这个对象中每个不同的key通过Object.defineProperty修改并监听数据的变化，在修改该key对应的value值时，调用set方法 打印下监听xxxx数据改变 并将修改值赋给value
在读取该key对应的value值时，调用get方法 打印下获取xxxx对应的值 并直接返回当前value值。

 created(){
      const obj = {
          message:"hhhhh",
          name:'cccccc'
      }
      Object.keys(obj).forEach(key =>{
        //   得到key对应的value值
          let value = obj[key]
        //   入参的三个值， 1 要修改的对象，2， key值，3，对象
            Object.defineProperty(obj, key, {
                set(newValue){
                    value = newValue
                    console.log('监听key值的变化', key, value)
                },
                get(){
                    console.log('获取key值的变化', key)
                    return value
                }
            })

      })
      setTimeout(()=>{
          obj.name="哈哈哈哈"
      }, 500)
       setTimeout(()=>{
          obj.message="are you ok"
      }, 1000)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

打印结果：
监听key值的变化 name 哈哈哈哈
A0701.vue?3346:26 监听key值的变化 message are you ok

分析： vue会遍历定义在Data里的所有属性，然后为这些属性加上setter和getter方法，
当设置属性的时候，set方法会被调用，只要set方法被调用，说明属性要被重新设置值了。
那么我们的观察者(watcher)对象会通知 虚拟DOM,重新渲染虚拟DOM，虚拟DOM会找到相应的子节点，同步真实DOM,把值换成最新的，页面就会发生改变。

2.发布订阅模式

什么是发布订阅模式？简单来说，就是当key对应的数据被修改时，Vue它要知道该去通知哪些数据也要发生改变，所以我们要把所有该页面上用到该对象中同一key加入到让它通知的名单里面就好像是一起订阅了，数据变化就发布，所有订阅者将会同时刷新。
要实现这种模式 我们需要定义两种类 发布者 和订阅者

总结：
数据响应式原理的核心就是采用了 数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,
通过 Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，
get（）方法可以读取数据、收集依赖set（）方法可以改写数据，
在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。”

注：Object.defineProperty() 只能处理对象。不能对数组进行监听处理；
不过VUEproxy完美处理了这点。

参考原文：vue是怎么实现数据响应式的？