迁移指南

vue迁移指南

1. ! 涉及代码改动

   1. setup 替代之前的 beforecreate 和 created, 建议将 created 换成 beforeMount

   2. beforeDestroy → beforeUnmount, destroyed → unmounted

   3. 移除 Vue.component, $on $off 和 $once, 导致无法直接通过 原型链 传递属性

      1. 无法使用事件总线, 可使用第三方包 mitt 代替使用
      2. 挂载在 vue.prototype 身上的数据共享数据使用 app.config.globalProperties 代替

   4. 移除 .sync, v-model 改为与 .sync 等同用法, 默认 v-model 等同于 v-model:modelValue, 即 vue 2 的 :modelValue.sync 也就是 :modelValue + @update:modelValue

   5. 移除 $listeners 合并到 $attrs 中, $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style。

      1. vue2: <组件 v-on="$linsteners" v-bind="$attrs" />, jsx 中 <组件 props={$props} attrs={$attrs} {...$linsteners} />
      2. vue3: <组件 v-bind="$attrs" />, jsx 中 <组件 {...$attrs} />

   6. 移除 $scopedSlots, 统一使用 $slot

      1. vue2: this.$scopedSlots.header 得到父组件传递的 <template #header>xxx</template> 内容
      2. vue3: this.$slots.header() 得到父组件传递的 <template #header>xxx</template> 内容

   7. jsx 中不在使用 scopedSlots 传递插槽, 统一改为 v-slots

   8. 移除 Vue.extend, 直接使用 createApp 代替, extend 选项还在

      1. vue2: const Profile = Vue.extend(组件);new Profile().$mount('#mount-point')
      2. vue3: const Profile = createApp(组件);new Profile().$mount('#mount-point')

   9. 移除 hook:生命周期 事件，改为 @vue:生命周期

      1. vue2: @hook:updated 监听组件的 updated 生命周期
      2. vue3: @vue:updated 监听组件的 updated 生命周期

   10. 移除 v-on 的数字 (即键码 keyCode) 修饰符, 仅支持按键修饰符

       1. vue2: v-on:keyCode.q 和 v-on:keyup.page-down/@keyup.page-down
       2. vue3: v-on:keypress.q 和 v-on:keyup.page-down/@keyup.page-down

   11. 移除过滤器 filter

   12. 移除 $set, 可以挂方法替代 app.config.globalProperties.$set = (obj,key,value)=>obj[key]=value

   13. 移除. native, 现在绑在组件上的属性不会默认被根组件继承了

   14. 移除 v-on 的 .native 修饰符除。新增 Fragments（片段）：Vue 3 中添加了 Fragments，也称为空内容标签，允许组件返回多个根元素，不需要每个 template 必须用单元素包裹了。

   15. 移除 $children

   16. 新增 emits 选项, 可以声明组件可触发的事件, emits: ['accepted'] '

   17. 自定义指令修改:

       1. created→ 新增！在元素的 attribute 或事件监听器被应用之前调用。
       2. bind →beforeMount
       3. inserted →mounted
       4. beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
       5. update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
       6. componentUpdated →updated
       7. beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
       8. unbind →unmounted

   18. 异步组件需要使用 defineAsyncComponent 包裹异步引入语句, 详见 [[vue#组件懒加载]]和 [[vue3#组件懒加载]]

   19. 修改 2. x 版本时, template 不能设置 key, key 设置在 template 的子节点上, 3. x 时 <template v-for> 的 key 应该设置在 <template> 标签上 (而不是设置在它的子节点上)。

   20. 修改 v-if 和 v-for 优先级, 二者同时出现在同一个元素身上时，vue2.6 以下 v-for 会优先作用。3. x 版本中 v-if 优先高于 v-for。建议避免在同一元素上同时使用两者。

   21. 获取路由实例与当前路由实例：vue 2 通过 this.$router/$route 获取 router 实例，vue 3 通过使用 getCurrentInstance/ userRoute 和 userRouter 方法获取当前组件实例/路由实例和当前路由实例

2. & 不需要代码改动

   1. 修改, h 函数现在是全局导入, 不再传递给 render 函数

   2. 修改 ,对于 v-if / v-else / v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。如果你手动提供 key，那么每个分支必须使用唯一的 key。你将不再能通过故意使用相同的 key 来强制重用分支。

   3. 2. x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。3. X 版本根据绑定的声明顺序将决定它们如何被合并, 即 v-bind="object" 在 bind 后则 v-bind="object" 优先级高, 否则相反。

   4. 所有依赖改为 esModule 形式, 方便树摇, 例如 vue 实例现在需要通过 createApp 创建

   5. 提供 composition api---