问题：你怎么理解数据响应式？为什么需要这个响应式？在什么地方使用响应式？如何是实现的？（what、why、where、how） ​

是Vue 最独特的特性之一的一种机制，监测数据变化，并响应这个变化，当你修改数据时，视图会进行更新，这使得状态管理非常简单直接。

两个好处： 做到一个数据驱动的，，当这个数据变化的时候，我们需要通过更新函数去更新 譬如说patch函数等。 声明式，首先会写个template写上各种数据绑定，这种绑定是在描述一个渲染函数，因为将来template会通过编译器转换成render函数，render函数内部隐藏着视图，我们希望这个视图和数据之间有种映射关系，将来数据发生变化，我们可以监测到，响应的时候让render函数再次执行 然后diff这两次结果，让页面再次更新。只需要去面对数据，改数据，但是不需要去关心dom的操作，这样开发的效率大幅提高，就是代替之前jq，jq就是大量DOM操作，减少了大量的操作DOM维护性、可读性都会提高

一般发生在data、props、methods、watch、computed,vue3多了composition api中有reactive()、ref(),

就是在挂载组件的时候，setupComponent函数-setupStatefulComponent函数-finishComponentSetup函数（对setup函数）-applyOptions函数对组件进行初始化的时候进行响应式处理

是通过Proxy进行对数据响应式绑定

问题 ： vue2 和 vue3响应式有和不同？ ​

实现方式不同 vue2使用Object.defineProperty()，而vue3使用的是 Proxy

Proxy解决了动态属性新增和删除的监听和更新，就不需要Vue2中的Vue.$set/delete()这组Api了

Proxy在处理对象的时候是一个懒处理，发生是个对象不会向下递归，直到用户在运行时访问某个数据的时候才会向下递归执行reactive

在依赖收集上，vue3中track()建立了一个对象里面了WeaKMap{taget：{key：[cb1,cb2]}}的垃圾回收机制 在vue2中是利用Observer中创建响应式对象，开始递归遍历每次找到一个key的时候进行defineReactive进行Object.defineProperty()进行响应式处理，每次执行的时候会制造一个闭包Dep们就会出现很多的observe、Observer、watch、Dep等，就会占用了很多的内存

额外的api Vue.$set/delete 数组的处理 vue3支持Map、Set的数据结构

问题：composition api 和reactivity api这两组api和之前的响应式有何不同？ ​

reactive()和ref()区别

实现方式不同： reactive直接使用new Proxy()

ref利用class的存储器的get和set，如果接受的obj参数还是reactive的方式，如果是原始类型利用class的get和set

使用方式不同

ref是单个值的，取值要加上.value

问题：setup和data中同时存在相同的key时,优先级谁高 ​

这个就是有这个PublicInstanceProxyHandlers函数决定的

如果在setup中有这个key了，那么就返回这个key，没有的话，才从data中取，还没有的话，从属性中取，再从上下文的ctx中寻找

总结 ​

这几个问题真的要好好记记