Vue 3.X 相对于Vue 2.X 的版本变化

Vue 3.X 相对于Vue 2.X 的版本变化

删除的部分

1. filters过滤器已被删除 文档地址，建议使用方法调用或计算属性代替
2. inline-template内联模板删除 文档地址

修改部分

1. template组件下可以存在多个根节点 文档地址

   <!-- vue2.X -->
   <template>
     <div>
       <header>...</header>
       <main>...</main>
       <footer>...</footer>
     </div>
   </template>
   
   
   <!--vue3.X  -->
   <template>
     <header>...</header>
     <main v-bind="$attrs">...</main>
     <footer>...</footer>
   </template>
   

2. 异步组件（只说明简单的导入）导入方式变更 文档地址 ，需要将组件使用defineAsyncComponent包装

   // vue 2.X
   const asyncPage = () => import('./NextPage.vue')
   
   // vue 3.X
   import { defineAsyncComponent } from 'vue'
   const asyncPage = defineAsyncComponent(() => import ('./NextPage.vue'))
   

3. 自定义指令的API重命名文档地址

   vue 2.X
   bind - 指令绑定到元素后发生。只发生一次。
   inserted - 元素插入父 DOM 后发生。
   update - 当元素更新，但子元素尚未更新时，将调用此钩子。
   componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
   unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。
   
   vue 3.X
   bind → beforeMount
   inserted → mounted
   beforeUpdate:新的！这是在元素本身更新之前调用的，很像组件生命周期钩子
   update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated
   componentUpdated → updated
   **beforeUnmount ** 新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
   unbind -> unmounted
   
   

   最终的API如下

   const MyDirective = {
     beforeMount(el, binding, vnode, prevVnode) {},
     mounted() {},
     beforeUpdate() {},
     updated() {},
     beforeUnmount() {}, // 新
     unmounted() {}
   }
   

4. key值的变化文档地址

   对于v-if/v-else/v-else-if的各分支项key将不再是必须的，vue会自动生成唯一的key，但是如果手动添加了key那么所有的分支都必须使用唯一的key

   <!-- Vue 2.x -->
   <div v-if="condition" key="yes">Yes</div>
   <div v-else key="no">No</div>
   
   <!-- Vue 3.x -->
   <div v-if="condition">Yes</div>
   <div v-else>No</div>
   
   <!-- 如果你手动提供了 key，那么每个分支都必须使用一个唯一的 key -->
   <!-- Vue 3.x -->
   <div v-if="condition" key="a">Yes</div>
   <div v-else key="b">No</div>
   

   <template v-for>的key应该设置在<template>标签上

   <!-- Vue 2.x -->
   <template v-for="item in list">
     <div :key="item.id">...</div>
     <span :key="item.id">...</span>
   </template>
   
   <!-- Vue 3.x -->
   <template v-for="item in list" :key="item.id">
     <div>...</div>
     <span>...</span>
   </template>
   

   当使用 <template v-for> 时存在使用 v-if 的子结点，key 应改为设置在 <template> 标签上。

   <!-- Vue 2.x -->
   <template v-for="item in list">
     <div v-if="item.isVisible" :key="item.id">...</div>
     <span v-else :key="item.id">...</span>
   </template>
   
   <!-- Vue 3.x -->
   <template v-for="item in list" :key="item.id">
     <div v-if="item.isVisible">...</div>
     <span v-else>...</span>
   </template>
   

需要导入的API

1. nextTick需要使用import { nextTick } from 'vue' 官方地址

   // vue 2.X
   import Vue from 'vue'
   
   Vue.nextTick(() => {
     // 一些和DOM有关的东西
   })
   
   // vue 3.X
   import {nextTick} from 'vue'
   
   // 第一种方法
   nextTick(() => {
     // 一些和DOM有关的东西
   })
   
   // 第二种方法
   import { shallowMount } from '@vue/test-utils'
   import { MyComponent } from './MyComponent.vue'
   import { nextTick } from 'vue'
   
   test('an async feature', async () => {
     const wrapper = shallowMount(MyComponent)
   
     // 执行一些DOM相关的任务
   
     await nextTick()
   
     // 运行你的断言
   })
   

2. v-show导入语法import {vShow} from 'vue'

   <transition>
     <div v-show="ok">hello</div>
   </transition>
   

组件传参时，直接在子组件中使用update更新传递的数据一点小变化

1. v2中需要在父组件中，子组件标签上，添加.sync标识符

   <Right-Container :msg.sync="msg"/>
   

   子组件使用$emit('update:msg', 需要更新的数据)
2. v3中，需要在父组件中，子组件标签上，添加v-model

   <Child1 v-model:msg="tranMsg"/>
   

   子组件使用$emit('update:msg', 需要更新的数据)