Vue响应式的原理

每次面试逃不过的一道面试题，那是什么呢？那就是 噔噔噔噔～～～ Vue的响应式，下面我们模拟一下面试的场景，看看大家是否感同身受，哈哈哈哈哈！！！！

 

面试官：看过Vue源码吗？

求职者：看过一点。

面试官：那你简单讲一下 Vue 的响应式原理

求职者：那什么，好的....

面试官：那就开始吧！

求职者：Vue的响应式原理主要经历了 3 个过程

　　　　1. 响应式处理的核心过程

　　　　2. 收集依赖的过程，

　　　　3. 数据改变时，watcher的执行过程

面试官：额，点点头，可以具体说一下嘛？比如响应式处理的核心过程是什么样的过程？是如何执行的？

求职者：好的，那我从入口开始讲一下，先写一个Vue 的 data 数据

const vm = new Vue({
    el: '#app',
    data: {
      NumberGroup: [1, 2, 3],
      StringName: 'XiaoMing Tongxue',
      userInfo: {
        name: 'DaYa Gao',
        sex: 'Girl'
      }
    }
  })

　　　　1. 首先 通过 _init方法初始化实例成员，其中 initState下的 initData 来初始化Vue的data属性，同时通过observe将data转化成响应式数据

　　　　2. observe方法 内 将data属性下添加 Dep 属性，并添加__ob__ 属性, 标识为 响应式数据

　　　　3. 判断 data属性，如果是对象，则调用 walk方法，将data的值进行遍历，通过 defineReactive 转化为响应式数据。

　　　　4. 其中 defineReactive 中分别对 NumberGroup, StringName, userInfo, 添加 Dep 属性，并对其子属性也添加 Dep 属性, 

　　　　5. 添加 Dep 属性后，通过 Object.definedProperty 的get方法 收集依赖 转换为响应式数据

　　　　5.