一、vue2和vue3的区别对比
1.双向绑定原理不同
vue2使用的是Object.definedProperty对数据进行劫持，缺点是：只能监听某个属性，不能对整个对象进行监听，需要循环递归处理每一个对象属性；不能监听数组，需要重写数组常用的操作方法
vue3使用的是es6新语法 proxy方法对整个对象进行代理，可以省去for in，闭包等内容来提升效率；可以代理数组对象，不需要单独的对数组做特异性处理。可以检测到数组内部数据的变化
2.是否支持碎片
Vue2 不支持碎片。Vue3 支持碎片，就是说可以拥有多个根节点
3.api不同
vue2常用写法是选项式api（Options API），而vue3新增了组合式api（Composition API）
4.定义数据变量和方法不同
vue2的数据声明在data中，方法生命在methods中
vue3的数据和方法都位于setup方法，使用reactive/ref声明数据变量，方法则是直接在方法内部声明或者外部引入
5.生命周期钩子函数不同
vue3中,beforeCreate与 created 这两个生命周期函数被取消，由setup替代，setup执行时机在beforeCreate与 created之前；其他生命周期函数（onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmounted、onUnmounted）调用前需要手动引入
6.父子传参、emit不同
Vue2 父传子，用props ；子传父用事件Emitting Events。在Vue2 中，会调用this.$emit 然后传入事件名和对象。
Vue3 父传子，用props;子传父用Emitting Events 。在Vue3 中的setup()中的第二参数context 对象中就有 emit,使用context.emit或者将emit解构出来即可使用
vue3新增了emits选项属性，用于声明由组件触发的自定义事件,如果没有在emits中列出绑定的函数，那么子组件绑定的函数将默认绑定到子组件的根节点上，即在父组件中定义的子组件标签会绑定一个函数而子组件内部用于触发函数的标签上也会绑定上。官方文档给了一个例子，就是子组件绑定的事件名称刚好是“click”，这就会导致子组件上的绑定的函数触发两次，一次是子组件内部触发的，一次是父组件中定义的子组件根节点触发的。
7.typeScript
Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导
8.v-model
参考文章：www.jb51.net/javascript/…
相同点
1.用在表单上，时都是给input绑定一个 value 值和 input 事件(默认情况)
不同点(主要用在组件上)
用在组件上(vue2)
2.用在组件上时
vue2
- v-model 只能使用一次
- 默认传递 vulue属性，接受 input 事件
- 默认传递的属性和事件可通过 model 选项进行修改
vue3
- v-model 只能使用一次，但可以在v-model后添加参数可使用多次
- 默认传递 modelValue 属性，接受 update:modelValue 事件，当在v-model后添加参数时如v-model:myPropName,则传递为 myPropName 属性，接受 update:myPropName事件
- 默认传递的属性和事件无法修改，必须是modelValue 和 update:modelValue
9.vueRouter传参
参考文章：blog.csdn.net/qq_30769437…
vue3只能使用vuerouter4，其中路由传参部分新增了props配置，可以通过props是去接收路由参数
1.对象
props值为对象，该对象中所有的key-value的组合最终都会通过props传给对应组件，但是只能传死数据，基本不用
2.布尔值
布尔值为true，则把路由收到的所有params参数通过props传给Detail组件只能将params参数通过props传给组件，query不行！
3.函数
props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件，相对而言最优方式
二、vue3性能提升优化点
1.tree-shaking
引入了tree-shaking技术，通过对代码的静态分析和编译阶段的动态分析，能够识别出未被引用的模块并进行剔除，从而减小最终的打包体积
2.diff算法优化
Vue2中的虚拟dom是进行全量对比，Vue3新增了静态标记，在与上次虚拟节点进行比较的时候，只对比带有静态标记的节点，并且可以通过标记的信息得知当前节点对比的具体内容。
相关文章：blog.csdn.net/weixin_4029…
编译器会在动态标签末尾加上 /* Text*/ PatchFlag。只有带patchFlag 的 Node 才被认为是动态的元素，会被追踪属性的修改。（PatchFlag 会标识动态的属性类型有哪些，比如这里 的TEXT 表示只有节点中的文字是动态的。）
3.hoistStatic 静态节点提升
Vue2中，无论元素是否参与更新，每次都会重新创建。Vue3中对于不参与更新的元素，会做静态提升，只创建一次，之后会在每次被渲染时不停复用，创建次数少了，性能就提升了。
4.cacheHandler 事件监听缓存
默认情况下onClick会被视为动态绑定，每当组件重新渲染时，都会重新获取该事件，导致被绑定节点重新渲染。将事件监听缓存复用后，被绑定节点就变成了静态节点，静态标记就不存在了，也就不会重新渲染了，就会提升性能了
5.SSR-StaticNode 静态节点 当有大量静态内容时，这些内容会被当成纯字符串推进一个buffer里面，即使存在动态的绑定，会通过插值嵌入进去。这样会比通过虚拟dom来渲染快很多。当静态内容大到一定量级的时候，会用_createStaticVNode方法在在客户端去生成一个static node,这些静态node会被直接innerHTML，就不需要创建对象，然后直接根据对象渲染。
