对vue响应式的理解

这是⼀道必问题⽬，但能回答到位的⽐较少。如果只是看看⼀些⽹⽂，通常没什么底⽓，经不住⾯试官推敲，但像我们这样即看过源码还造过轮⼦的，回答这个问题就会⽐较有底⽓啦。

答题思路：

1. 啥是响应式？
2. 为什么vue需要响应式？
3. 它能给我们带来什么好处？
4. vue的响应式是怎么实现的？有哪些优缺点？
5. vue3中的响应式的新变化

回答范例：

1. 所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
2. MVVM框架中要解决的⼀个核⼼问题是连接数据层和视图层，通过数据驱动应⽤，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样⼀旦数据发⽣变化就可以⽴即做出更新处理。
3. 以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发⼈员只需要操作数据，关⼼业务，完全不⽤接触繁琐的DOM操作，从⽽⼤⼤提升开发效率，降低开发难度。
4. vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采⽤Object.defineProperty()的⽅式定义数据拦截，当数据被访问或发⽣变化时，我们感知并作出响应；如果是数组则通过覆盖数组对象原型的7个变更⽅法，使这些⽅法可以额外的做更新通知，从⽽作出响应。这种机制很好的解决了数据响应化的问题，但在实际使⽤中也存在⼀些缺点：⽐如初始化时的递归遍历会造成性能损失；新增或删除属性时需要⽤户使⽤Vue.set/delete这样特殊的api才能⽣效；对于es6中新产⽣的Map、Set这些数据结构不⽀持等问题。
5. 为了解决这些问题，vue3重新编写了这⼀部分的实现：利⽤ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是⼀致的，不需要使⽤特殊api，初始化性能和内存消耗都得到了⼤幅改善；另外由于响应化的实现代码抽取为独⽴的reactivity包，使得我们可以更灵活的使⽤它，第三⽅的扩展开发起来更加灵活了。

知其所以然

vue2响应式：

https://github1s.com/vuejs/vue/blob/HEAD/src/core/observer/index.js#L135-L136

vue3响应式：

https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/reactive.ts#L89-L90
https://github1s.com/vuejs/core/blob/HEAD/packages/reactivity/src/ref.ts#L67-L68