内容混杂用法 + 原理 + 使用小心得 ， 建议收藏 ， 慢慢看 。
区别生命周期的变化整体来看 ， 变化不大 ， 只是名字大部分需要 + on ， 功能上类似 。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用 ， 如下所示 。
// vue3<script setup>import { onMounted } from 'vue'onMounted(() => {...})// 可将不同的逻辑拆开成多个onMounted ， 依然按顺序执行 ， 不被覆盖onMounted(() => {...})</script>// vue2<script>export default {mounted() {...},}</script>常用生命周期表格如下所示 。
Vue2.xVue3beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted
Tips： setup是围绕beforeCreate和created生命周期钩子运行的 ， 所以不需要显式地去定义 。
多根节点Vue3 支持了多根节点组件 ， 也就是fragment 。
Vue2中 ， 编写页面的时候 ， 我们需要去将组件包裹在<div>中 ， 否则报错警告 。
<template><div><header>...</header><main>...</main><footer>...</footer></div></template>Vue3 ， 我们可以组件包含多个根节点 ， 可以少写一层 ， niceeee ！
<template><header>...</header><main>...</main><footer>...</footer></template>异步组件Vue3 提供 Suspense组件 ， 允许程序在等待异步组件时渲染兜底的内容 ， 如 loading  ， 使用户体验更平滑 。使用它 ， 需在模板中声明 ， 并包括两个命名插槽：default和fallback 。Suspense确保加载完异步内容时显示默认插槽 ， 并将fallback插槽用作加载状态 。
<tempalte><suspense><template #default><todo-list /></template><template #fallback><div>Loading...</div></template></suspense></template>真实的项目中踩过坑 ， 若想在 setup 中调用异步请求 ， 需在 setup 前加async关键字 。这时 ， 会受到警告async setup() is used without a suspense boundary 。
解决方案：在父页面调用当前组件外包裹一层Suspense组件 。
TeleportVue3 提供Teleport组件可将部分DOM移动到 Vue App之外的位置 。比如项目中常见的Dialog组件 。
<button @click="dialogVisible = true">点击</button><teleport to="body"><div class="dialog" v-if="dialogVisible"></div></teleport>组合式APIVue2 是 选项式API（Option API） ， 一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等） ， 导致代码的可读性变差 ， 需要上下来回跳转文件位置 。Vue3 组合式API（Composition API）则很好地解决了这个问题 ， 可将同一逻辑的内容写到一起 。
除了增强了代码的可读性、内聚性 ， 组合式API 还提供了较为完美的逻辑复用性方案 ， 举个 ， 如下所示公用鼠标坐标案例 。
// main.vue<template><span>mouse position {{x}} {{y}}</span></template><script setup>import { ref } from 'vue'import useMousePosition from './useMousePosition'const {x, y} = useMousePosition()}</script>// useMousePosition.jsimport { ref, onMounted, onUnmounted } from 'vue'function useMousePosition() {let x = ref(0)let y = ref(0)function update(e) {x.value = https://www.isolves.com/it/cxkf/qd/2022-02-25/e.pageXy.value = e.pageY}onMounted(() => {window.addEventListener('mousemove', update)})onUnmounted(() => {window.removeEventListener('mousemove', update)})return {x,y}}解决了 Vue2 Mixin的存在的命名冲突隐患 ， 依赖关系不明确 ， 不同组件间配置化使用不够灵活 。
响应式原理Vue2 响应式原理基础是Object.defineProperty；Vue3 响应式原理基础是 Proxy 。
Object.defineProperty基本用法：直接在一个对象上定义新的属性或修改现有的属性 ， 并返回对象 。
Tips： writable 和 value 与 getter 和 setter 不共存 。
let obj = {}let name = '瑾行'Object.defineProperty(obj, 'name', {enumerable: true, // 可枚举（是否可通过for...in 或 Object.keys()进行访问）configurable: true, // 可配置（是否可使用delete删除 ， 是否可再次设置属性）// value: '', // 任意类型的值 ， 默认undefined// writable: true, // 可重写get: function() {return name},set: function(value) {name = value}})