一、vue3比vue2的优势

• 性能更好
• 体积更小
• 更好的TS支持
• 更好的代码组织
• 更好的逻辑抽离

二、生命周期的区别

• beforeDestory改为beforeUnmount
• destoryed改为unmounted
• 其他沿用Vue2生命周期

三、理解ref toRef和toRefs

ref

• 生成值类型的响应式数据
• 可用于模板和reactive
• 通过.value修改值

toRef

• 针对一个响应式对象（reactive封装）的prop
• 创建一个ref，具有响应式
• 两者保持引用关系

setup() {
    const state = reactive({
        age: 20,
        name: '啦啦'
    })
    const age1 = computed(() => {
        return state.age + 1
    })
}

toRefs

• 将响应式对象（reactive封装）转换为普通对象
• 对象的每个prop都是对应的ref
• 两者保持引用关系

const state = reactive({
    age: 20,
    name: '双越'
})
const stateAsRefs = toRefs(state) 

为何需要ref

• 返回值类型，会丢失响应式
• 如在setup、computed、合成函数，都有可能返回值类型

四、vue3变化

• 新增三个组件，Fragment支持多个根组件，suspense可以在组件渲染之前的等待时间显示指定内容，Teleport可以让子组件能够在视觉上跳出父组件
• 新增v-memo，可以缓存html模板
• 用Proxy代替Object.defineProperty重构了响应式系统，可以监听数组下标变化
• 重构了虚拟DOM，在编译时会将事件缓存，将slot编译为lazy函数，保存静态节点直接复用，以及添加静态标记，diff算法使用，最长递增子序列，优化了对比流程，使得虚拟DOM生成速度提升200%
• 新增Componsition API可以更好的逻辑复用和代码组织，统一功能不至于像以前一样太分散，虽然vue2可以使用mixin来实现复用代码，但也存在问题，比如方法或属性名会冲突
• 全局函数set和delete以及实例方法$set和$delete移除，基于代理的变化监测已经不再需要它们了
• vue3不兼容IE11

五、diff算法的比较

• Vue2 双端比较
• Vue3 最长递增子序列

六、vite

• 一个前端打包工具, Vue 作者发起的项目
• 借助 Vue 的影响力,发展较快,和 webpack 竞争
• 优势:开发环境下无需打包,启动快
• 开发环境使用 ES6 Module， 无需打包一非常快

要构建一个 Vite + Vue 项目，运行:npm create vite@latest my-vue-app -- --template vue

npm init vite