1、什么是响应式？

数据变化可以被检测对这种变化做出响应的机制

2、Vue为什么需要响应式？

MVVM框架需要解决的核心问题技术就是连接数据层和视图层，
通过数据驱动应用，数据变化，试图更新，要做到这点就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。

3、响应式的好处？

通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，大大提升开发效率，降低开发难度。

4、如何实现Vue的响应式？优缺点？

Vue2肿的数据响应式会根据数据类型来做不同处理，如果是对象采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并做出响应；
如果是数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而作出响应。
这种机制很好的解决了数据响应化问题，但是也存在一些缺点：
初始化时的递归遍历会造成性能损失；新增或者删除属性需要使用Vue.set/delete这些特殊的API才能生效；对于es6中新产生的Map、Set这些数据结构不支持。

1
2
3
4
5
6
function defineReactive(obj,key,val){
  Object.defineProperty(obj,key,{
    get(key){},
    set(key,val){}
  })
}

5、Vue3如何实现响应式？

利用es6的Proxy代理响应式的数据。
好处：不需要特殊的api，初始化性能和内存小号都得到了大幅改善
由于响应化的实现代码抽取为独立的reactivity报，使得我们可以灵活的使用它，第三方的扩展开发更加的灵活

Proxy属性拦截的原理：利用get、set、deleteProperty这3个trap实现拦截

1
2
3
4
5
6
7
function reactive(obj){
  return new Proxy(obj,{
    get(target,key){},
    set(target,key,val){},
    deleteProperty(target,key){}
  })
}

proxy更快的原因：初始化时懒处理，用户访问才做拦截处理，初始化更快。

1
2
3
4
5
6
7
// https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/baseHandlers.ts
    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      return isReadonly ? readonly(res) : reactive(res)
    }

轻量的依赖关系保存：利用WeakMap\Map\Set保存响应式数据和副作用之间的依赖关系。