vue2和vue3的区别有哪些

一、生命周期

vue3在组合式API（Composition API）中使用生命周期钩子时需要先引入，vue2在选项API（Options API）中可以直接调用生命周期钩子

//vue3
<script setup>
import { onMounted } from 'vue'
onMounted(()=>{
  //逻辑1    
})
onMounted(()=>{
  //逻辑2，可将不同的逻辑拆分到多个onMounted，依然按顺序执行，不会被覆盖
})
</script>

//vue2
<script>
export default {
  mounted(){
    //直接调用生命周期钩子，逻辑写在一起
  }
}
</script>

常用生命周期对比如下：

vue2	vue3
beforeCreate
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

二、多个根节点

//vue3，会默认包裹一个Fragment标签，但是不会渲染到页面
<template>
  <header></header>
  <main></main>
  <footer></footer>
</templdate>

//vue2
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

三、Composition API

Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。
Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。
defineProps
defineEmits(['change'])

四、异步组件

Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。
使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。
Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。

五、Teleport

Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。

<button @click="dialogVisible=true">显示弹窗</button>
<teleport to="body">
  <div class="dialog" v-if="dialogVisible">
    我是弹窗，我直接移动到了body标签下
  </div>
</teleport>

六、响应式原理

//vue2
响应式原理是：Object.defineProperty
let obj = {}
let name = 'leo'
Object.defineProperty(obj, 'name', {
  enumerable: true,
  configurable: true,
  get(){
    return name
  }
  set(value){
    name = value
  }
})

//vue3
响应式原理是：Proxy

 1.利用ES6的proxy，支持13种拦截操作（get,set,has,deleteProperty,ownKeys,defineProperty,getPrototypeOf,apply,construct,getOwnPropertyDescriptor,preventExtensions,isExtensible,setPrototypeOf）
 2.劫持整个对象，并返回一个新对象
 3.Reflect api 更新属性
 4.proxy代理基础类型 会报错

七、虚拟DOM

八、事件缓存

九、Diff 算法优化

vue2：虚拟dom是尽量全量对比的，双向指针遍历
vue3：使用经过优化的单向遍历算法，仅扫描新虚拟DOM树上的节点，判断是否需要更新；
     打上动态标记patchFlag，对于不参与更新的元素，做静态标记-1，只会创建一次，直接复用

十、打包优化：Tree-shaking

十一、TypeScript 支持