本文不适合Vue初学者。如果你是Vue2迁移者或者准备面试，那么这篇文章绝对适合你。我们不废话了。Vue2和Vue3有什么区别Vue3的理解/Vue3如何更快的？新增了三个组件：Fragment支持多个根节点，Suspense可以在组件渲染前的等待时间内显示指定内容，Teleport可以让子组件直观地跳出父组件（比如父组件overflow:hidden）。v-memo可以缓存html模板。例如，如果v-for列表没有变化，它就会被缓存。简单地说，它使用内存换时间来支持Tree-Shaking。它会在打包时去掉一些无用的代码和不用的模块，使得代码的打包体积更小。新增的CompositionAPI可以更好的逻辑复用和代码组织。同一个功能的代码不会像以前那样过于分散。虽然minxin可以在Vue2中实现代码复用，但是仍然存在方法或属性名会冲突，代码来源不明等问题。用Proxy代替Object.defineProperty重构响应式系统，可以监听数组下标的变化和对象的新属性，因为监听的不是对象属性，而是对象本身，还可以拦截apply和不得不重构等13个方法虚拟DOM。编译时会缓存事件，将槽编译成懒函数，保存静态节点直接复用（staticpromotion），并加入静态标签和Diff算法使用最长增量子序列优化比较过程，使虚拟DOM生成速度加快by200%支持在中使用v-bind将JS变量绑定到CSS（颜色：v-bind(str)）删除了beforeCreate和created两个生命周期，直接替换了两个钩子函数开发环境与设置。当组件更新时，onRenderTracked会跟踪组件中所有变量和方法的变化，onRenderTriggered会在每次触发渲染时返回。发生变化的新旧值可以让我们进行有针对性的调试。毕竟Vue3是用TS写的，所以对TS的支持比较好。Vue3不兼容IE11。告诉我CompositionAPI和OptionsAPI之间的区别？比较持仓API也称为组合API。主要是解决Vue2中OptionsAPI的问题。首先，在Vue2中，只能使用data、computed、methods等选项来组织代码。当组件越来越复杂时，一个函数相关的属性和方法会在文件中无处不在，非常分散，越来越难以维护。第二，在Vue2中虽然可以使用minxin进行逻辑抽取和复用，但是minxin中的属性和方法名会和组件内部的命名冲突，当引入多个minxin时，不清楚是哪个minxin的属性或方法我们使用comefrom，而CompositionAPI恰好解决了这两个问题，让我们可以自由组织代码，将同一个功能相关的都放在一起，代码可读性更好，更容易维护，也不会造成命名冲突当单独提取时，它也具有更好的可扩展性。再来说说setup//方法setup(props,context){return{name:'Muhua'}}//语法糖setup()方法是在beforeCreate之前执行的函数()生命周期函数；接收两个参数props和context。里面不能用this，而是用context对象代替当前执行上下文绑定的对象。上下文对象有四个属性：attrs、slots、emit和expose。将之前的数据语法替换为ref和rective，返回返回的内容。,可以在模板中直接使用，包括变量和方法，使用setup语法糖时，不需要写exportdefault{}，子组件直接import即可使用，不需要在components中注册和以前一样，你不需要返回属性和方法。而且不需要async直接使用await，因为这样会把组件的setup默认改成asyncsetup。使用语法糖进行setup时，props、attrs、slots、emit、expose的获取方式不同。3.0~3.2版本更改通过import引入的API：defineProps,defineEmit,useContext（3.2版本废弃），useContext的属性{emit,attrs,slots,expose}3.2+版本不需要导入，直接调用：defineProps,defineEmits,defineExpose,useSlots和useAttrsVue3.2的变化可以看我的另一篇文章，这里就不动了。最新的Vue3.2更新了什么？了解watch和watchEffect之间的区别。监控变化；触发时，将返回新值和旧值；也就是说第一次不会执行，只有变化了才会重新执行。constname=ref('Muhua')watch(name,(newValue,oldValue)=>{...},{immediate:true,deep:true})//Reactiveobjectconstboy=reactive({age:18})watch(()=>boy.age,(newValue,oldValue)=>{...})//监听多个手表([name,()=>boy.age],(newValue,oldValue)=>{...})watchEffect传入了一个立即执行的函数，所以默认第一次执行一次；无需传入监控内容，函数中的数据源会自动收集为依赖，当依赖发生变化时，函数会重新执行。如果没有依赖，则不会执行；并且不会返回变化前后的新值和旧值卸载后会自动停止监听并清除副作用：onInvalidate会作为回调副作用刷新时机的第三个参数：reactive系统会缓存副作用函数并异步刷新，避免避免同一个tick中多次状态变化引起的监听器重复调用调试：在开发模式下可以使用OnTrack和onTrigger进行调试Vue3响应式和Vue2的原理区别众所周知Vue2数据响应式通过Object劫持各种属性.defineProperty()getter和setter在数据变化时向订阅者发布消息，触发相应的监听回调，它们之间存在几个问题。在初始化时，需要遍历对象的所有键。如果对象层次很深，性能不好，需要维护更新过程。大量的dep实例和watcher实例占用大量额外内存。Object.defineProperty无法监听数组元素的变化。只能通过劫持rewrite方法动态添加。删除对象属性无法拦截，只能通过具体的set/deleteAPI来代替，不支持Map、Set等数据结构。Vue3为了解决这些问题，改用原生代理，支持监听对象和数组的变化，拦截方式多达13种。可以拦截动态属性的增删改查，增加新的数据结构。全部支持，对象嵌套属性只代理第一层，运行时递归，使用时只代理，不需要维护很多依赖，性能有很大进步，更多细节和源码分析可以看我的其他articleVue3.2响应式原理源码分析，以及与Vue2响应式的区别defineProperty和Proxy的区别为什么要用Proxy而不用defineProperty？这有什么好？Object.defineProperty是Es5的方法，Proxy是Es6的方法。defineProperty无法监控数组下标的变化和对象的新属性。Proxy可以通过defineProperty劫持对象的属性。Proxy是整个对象的代理。defineProperty有很大的局限性，只能针对单个属性。监听，所以一开始需要所有的递归监听Proxy对象的嵌套属性在运行时是递归的，只使用代理，不需要维护很多依赖。性能大幅提升，首次渲染速度更快。defineProperty会污染原来的对象。修改时，原始对象被修改。代理是对原对象进行代理，会返回一个新的代理对象。修改是代理对象defineProperty不兼容IE8，Proxy不兼容IE11。Vue3的生命周期基本上是在Vue2的生命周期钩子函数的名字上加上的；beforeDestory和destroyed改名为onBeforeUnmount和onUnmounted；然后删除了beforeCreate和created的两个钩子函数；增加了两个开发环境hook，用于调试Vue3的8种组件通信可以看我的另一篇文章，就不搬过来8种Vue3与Vue2的12种组件通信，值得收藏的Vue3Diff算法和Vue2。我们知道，当数据变化触发页面重新渲染时，会生成一个虚拟DOM，并进行patch过程。Vue3对这个过程的优化包括以下编译阶段的优化：事件缓存：事件缓存（如：@click）可以理解为静态化由于编译阶段的优化，Diff过程不仅可以生成虚拟DOM更快，但也使Diff能够跳过“永不改变的节点”。Diff优化如下：Vue2是全Diff，Vue3是静态标记+非全Diff使用最长递增子序列优化比较过程。根据友达发布的数据，Vue3更新后的性能提升了1.3~2倍。源码分析可以参考我的另一篇文章。下面是Vue开发中12个精彩的性能优化技巧。一次性了解Vue2和Vue3的nextTick实现原理。Vue3.2Responsive原理源码分析，以及与Vue2.xResponsiveStyle的区别。与Diff算法交流，以及Vue2和Vue3的区别8种Vue3和12种Vue2组件，值得收藏的JavaScript进阶知识点20分钟助你打赢HTTP和HTTPS，巩固你的HTTP知识库结语老铁，点个赞~~
