1.vue2和vue3中的reactive类型有什么区别？创建一个观察者类，为每个数据创建一个数组来管理依赖，在getter中收集依赖，在setter中通知依赖更新。因此，每当读取或写入属性时，都会触发get和set，以监控该属性。在vue2中访问对象属性需要先知道一个具体的key，所以通过下标获取对象中的新属性和数组中的新数据会有些不足。vue2中全局$set方法的本质是手动给新属性添加observerObject.defineProperty(car,'price',{get(){},set(){}})。vue3中的响应是使用Proxy，target是目标对象可以是一个数组甚至是另一个proxy，handler通常用于自定义拦截行为，通常包含has、get、set、deleteProperty等方法。可见vue3对对象的代理不依赖于对象属性，所以可以很好的解决vue2的不足。constproxy=newProxy(target,{get:function(target,propKey,receiver){return'10'}})2.vue3相比vue2优化全局API修改的地方：在vue2中，导出全局vue对象，在单元测试中，很容易污染全局环境，引起冲突。在vue3中，app实例是通过createApp创建的，所有的操作修改都从直接操作vue全局对象变成了操作vue实例。一些全局API支持tree-shaking，成为命名导出，并与vue对象分离。比如nextTick的引用方法由Vue.nextTicke改为import{nextTick,observable}fromvue。通过CompositionAPI对代码进行逻辑划分，可以更好的复用代码。vue2中代码的分离可以通过mixins来完成，但是mixins存在命名冲突，暴露变量来源不明等问题，可以对组合api重命名，避免命名冲突。对typescript的更好支持增加了一些其他功能，例如teleport中的suspense组件和suspense3.vue3。vue3中使用了defineAsyncComponent方法。该方法接受返回承诺并动态加载组件的工厂函数。constAsyncComp=defineAsyncCompopent(()=>newPromise((resolve,reject)=>{resolve({template:'
test
'})}))在vue2中直接通过import导入。4.vue3中的teleport组件teleport就像一个传送门，让我们可以控制在哪个dom节点下渲染html。to属性接受一个querySelector，设置父节点。实现原理：通过createBlock生成vnode，创建teleport组件，调用Teleport.process选择父节点，在dom中挂上mountChildren方法。
5.说说virtualdom，优化vue3中的virtualdom。虚拟dom是描述dom节点的js对象。当数据发生变化时，对比变化前后的虚拟dom节点，通过dom-diff算法计算出需要更新的地方，然后更新需要的视图。在vue中，通过VNode类来实例化不同类型的虚拟dom。比如评论节点用isComment表示是否是评论节点，text表示具体的评论信息。exportconstcreateEmptyVNode=(text:string='')=>{constnode=newVNode();node.text=文本；node.isComment=true;returnnode;}在优化之前，在一个默认的VirtualDomdiff过程中，需要遍历所有的节点，比较旧的props和新的props是否发生了变化。优化后创建的vnode多了patchflags来标记节点的可变属性。当diff算法到达_createBlock函数时，会忽略所有静态节点，只比较标记的动态节点，多层嵌套下依然有效。6、vue3中beforeCreate和create的生命周期在setup函数中几乎是同时触发的。生命周期函数的编写OnBeforeMount,OnMounted,onUpdatedvue3还有两个调试钩子函数onRenderTrackedonRenderTriggered，顾名思义就是render重绘时触发。同一个组件是否通过key复用元素，所以修改一个元素的key可以重新渲染该元素8.vue3和vue2的watch有什么区别？vue3中watch函数的第一个参数是一个响应式对象，带有getter/setter的效果函数，或者这些类型的数组；第二个参数是数据变化时的回调；第三个参数watchOption，提供是否立即监控和是否深度监控的配置。Vue3可以多次使用watch方法watch(data,()=>{})watch(()=>data.name,()=>{})watch([data,name],()=>{})vue3的setup中不存在this对象，需要使用vue-router提供的userRoute来监听路由。对于vue2，在watch对象中添加'$route'来监听import{useRoute}from"vue-router";//setupconstroute=useRoute();constuserData=ref();//参数变化时获取用户信息watch(()=>route.params,()=>{});9、vue3中watchEffect与watch的异同：watchEffect立即执行传入的函数，在初始化时自动收集依赖，当其依赖发生变化时重新运行该函数。watchEffect无法获取原始值，只能获取更改后的值。相同点：两者都可以通过StopHandle.stop()函数手动停止监听conststopHandle=watchEffect();handle.stop();10、v-model的原理及vue3中v-model的变化v-model通过在数据修改绑定时通知父节点来实现双向数据传递。其实就是一种语法糖。当满足以下两个条件时，可以实现自定义组件的v-model：当控制子组件接收prop数据修改时，触发事件将新数据提交给父组件props:{value:String},model:{prop:'value',event:'change'}vue3升级了v-mode的用法，事件由update:modelValue触发，prop也改为modelValue。也支持一个组件上有多个v-model，比如添加v-model:lastName等。props:{modelValue:String,}emits:['update:modelValue'],methods:{changeTitle(){this.$emit('update:modelValue',title)}}参考链接复制笔记：优玉玺在Vue3中.0Beta直播，我们讲了这些Vue原理解析（8）：一起来搞清楚麻烦的diff算法
