Vue2 到 Vue3 变动内容

Vue3 不支持 IE11 及以下

Vue2 不支持 IE8 及以下 因其无法兼容模拟 ES5 的特性

官方说明

双向数据绑定方法变化 Proxy
Tree-Shaking 支持

新增-强大的新特性：

1. 新增了 组合式 api --> setup
   同时支持render jsx 写法
   单文件组件的组合式 API 语法糖<script setup> 极大降低组件代码量
2. <teleport to="selecter"></teleport> 保留原来层级关系的情况下，指定渲染的父节点
   Suspense
   多v-model 用法
3. 模板支持多个根节点 需要指明属性继承的位置 v-bind="$attrs"
4. 增加 emit 选项，自定义事件必须注册
5. SFC 可以绑定样式变量
6. <style scoped> v-deep、v-slotted、v-global

修改-非兼容变更

全局API

• vue2 没有app概念 每个实例共用全局配置
  vue3 需要创建一个应用实例 createApp()
• 重构了全局配置和 API 使其可以被 webpack 清除"死代码" ，如：

Vue.nextTick() 变为 nextTick()

模板指令

• v-model 的范围扩大，允许同时绑定多个，v-bind.sync 被 v-model 替代
• v-if / v-else / v-else-if key属性非必须(自动分配) 不能使用相同 key 来重用分支
  <template v-for> 的 key 位于 template 上，而不是子节点
  存在 v-if 的子节点，key 也应该设置在 template 上
• v-for 与 v-if 嵌套 优先级发生变化 现在v-if具有更高优先级，之前v-for具有更高优先级
• 由单独v-bind可覆盖v-bind="object"变为 后出现会覆盖先出现的
• 移除 v-on.native 转而 默认 未emits（Vue3新） 的事件 监听自动添加到子组件根元素
• 对 v-for 上的 ref 不在自动创建ref数组，可通过更灵活的函数创建

组件

• 不再建议使用函数式组件 functional属性被移除 函数式组件被定义为纯函数
  异步组件需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义
  带请求相关选项时，component 改名为 loader

渲染函数

• h 现在是全局导入，而不是作为 render 参数传递给渲染函数
  Vue3中 VNode 是上下文无关 不能再用字符串 ID 隐式查找已注册组件；转而使用新方法 resolveComponent
• $scopedSlots 属性移除，插槽通过 $slots 作为函数暴露
• $listeners 被移除或整合到 $attrs
  $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style
  Vue3 事件监听器只是以 on 为前缀的 attribute，这样就成了 $attrs 对象的一部分

自定义元素

通过is 将 自定义元素 标记为 自定义内置元素
Vue2 中 is 会被视为 组件
Vue3 仅当 is 的位于 <component> 标签中，才会被视为组件；
在组件上使用会被视为 普通属性；
为此，使用 vue: 前缀 来还原 vue2 中 is 解决 DOM 内模板解析问题作用。

其他小改变

• 生命周期变化
  destroyed => unmounted
beforeDestroy => beforeUnmount

• 生成 prop 默认值的工厂函数不再能访问 this

• 丰富规范化了自定义指令的生命周期

• data 选项已标准化为只接受返回 object 的 function

• 来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行

• 非布尔型属性值为 false 时不再被移除，除非为 null 或者 undefined

• 放弃“枚举型 attribute”的内部概念，并将它们视为普通的非布尔型属性

• 当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组被改变时触发回调，必须指定 deep 选项。 vue2 数组不需要加deep

• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将渲染为原生的 <template> 元素，而不是渲染其内部内容。

• 在 Vue 2.x 中，当挂载一个具有 template 的应用时，被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中，被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML。

• hook: => vnode- (横线可转化为驼峰)

被移除的API

• Vue.config.keyCodes
  不再支持使用数字 (即键码) 作为 v-on 修饰符
  通一使用字符修饰符
• $on，$off 和 $once 实例方法已被移除 无法迁移
• 过滤器 (filter) 移除 可使用计算属性或方法代替
• 内联模板特性 已移除 可使用 $refs 访问
• $children 已移除
• propsData 选项已经被移除。如果你需要在实例创建时向根组件传入 prop，你应该使用 createApp 的第二个参数
• $destroy 实例方法被移除。用户不应再手动管理单个 Vue 组件的生命周期。
• 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们

VDOM 性能瓶颈突破

做了静态标记，静态内容不会去再对比
通过位运算对比得出其的静态标记情况