Vue3-03 从Vue2迁移

文章目录

Teleport

一个新增的内置组件,用来提供一种干净的方法,允许我们控制在DOM哪个父节点下渲染HTML,不必求助于全局状态或者将其拆分为两个组件

<teleport to="body">
  <div v-if="modalOpen" class="model-wrapper">
    <div class="modal">
      <i class="el-icon-close" @click="modalOpen = false"></i>
      <p>Hello</p>
    </div>
  </div>
</teleport>

Vue会将<teleport>标签内的内容渲染为<body>标签的子级

它接受两个参数,第一个参数to是有效的查询选择器,指定要挂载的目标元素,第二个参数disabled用来禁用<teleport>的功能,元素会在原组件位置渲染

注意,disabled状态变化后,将移动实际的DOM节点,而不是被销毁和重新创建,并且它还将保持任何组件实例的活动状态(例如播放的视频等)

在同一个目标上使用多个<teleport>组件,会将内容挂载到同一个目标元素,顺序就是简单的追加,稍后挂载的将位于目标元素中较早的挂载之后

v-for中的Ref数组

从单个绑定获取多个Ref时,需要将ref绑定到一个更灵活的函数上,在函数中,将函数的参数el推书预置的数组中:

<div v-for="item in list" :ref="setItemRef"></div>

选项式API:

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

组合式API:

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

注意:

  • itemRefs不必是数组,可以是一个对象
  • 如果需要,itemRef也可以是响应式的,可以被监听
  • 需要在onBeforeUpdate中对itemRefs重置,否则会出问题

异步组件(新增)

Vue3中函数式组件被定义为纯函数,异步组件的定义需要通过defineAsyncComponent方法显示定义:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// 不带选项的异步组件
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

// 带选项的异步组件
const asyncPageWithOptions = defineAsyncComponent({
  loader: () => import('./NextPage.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

相比于Vue2,component选项被重命名为loaderloader函数不接受resolvereject参数,必须始终返回Promise

const { createApp, defineAsyncComponent } = Vue

const app = createApp({})

const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)

如果利用Webpack和ES2015的能力,可以使用import直接导入:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)

defineAsyncComponent的完整用法:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // 工厂函数
  loader: () => import('./Foo.vue')
  // 加载异步组件时要使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时要使用的组件
  errorComponent: ErrorComponent,
  // 在显示 loadingComponent 之前的延迟 | 默认值:200(单位 ms)
  delay: 200,
  // 如果提供了 timeout ,并且加载组件的时间超过了设定值,将显示错误组件
  // 默认值:Infinity(即永不超时,单位 ms)
  timeout: 3000,
  // 定义组件是否可挂起 | 默认值:true
  suspensible: false,
  /**
   *
   * @param {*} error 错误信息对象
   * @param {*} retry 一个函数,用于指示当 promise 加载器 reject 时,加载器是否应该重试
   * @param {*} fail  一个函数,指示加载程序结束退出
   * @param {*} attempts 允许的最大重试次数
   */
  one rror(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试,最多可尝试 3 次
      retry()
    } else {
      // 注意,retry/fail 就像 promise 的 resolve/reject 一样:
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }
})

$attrs包含classstyle

Vue2中v-bind="$attrs"会把除了classstyle的属性应用到元素上,而Vue3中的$attrs则会包含classstyle

组件的inheritAttrs默认为true,这样加载组件的不被认作Props的Attribute会应用到子组件的根元素上,通过设置inheritAttrsfalse,这个默认行为会被取消,通过配合v-bind="$attrs"会把这些Attribute显性的绑定到非根元素上

$children

Vue2中可以通过$children访问当前组件实例的子组件,这个API在Vue3中取消了,需要使用ref来访问子组件

自定义指令

Vue3中自定义指令的钩子有了很大变化:

  • created(new):在元素的Attribute或事件侦听器创建前调用
  • bindbeforeMount
  • insertedmounted
  • beforeUpdated(new):在元素本身更新前调用
  • update移除,改为使用updated
  • componentUpdatedupdated
  • beforeUnmount(new),在卸载元素前调用
  • unbindunmounted

最终API如下:

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

Vue中通过binding.vnode访问组件实例:

mounted(el, binding, vnode) {
  const vm = binding.instance
}

Data选项

Vue3的Data选项只接受返回objectfunction,不再接受object本身

Data的Mixin合并

在Vue2中,来自组件的Data与来自Mixin或者Extends的Data合并时,会执行深层次的合并,在Vue3中只会执行浅层次的合并:

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}
const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

上面的Mixin,在Vue2中得到的data是:

{
  user: {
    id: 2,
    name: 'Jack'
  }
}

在Vue3中,得到的data是:

{
  user: {
    id: 2
  }
}

对于依赖Mixin深度合并的行为,建议重构代码以完全避免这种依赖,因为Mixin的深度合并非常隐式,这让代码逻辑难以理解和调试

emits选项

Vue3中新增了emits选项,与props选项很类似。这个选项用来定义和校验(包括类型定义)组件能想父组件触发什么事件

const app = Vue.createApp({})

// 数组语法
app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})

// 对象语法
app.component('reply-form', {
  emits: {
    // 没有验证函数
    click: null,

    // 带有验证函数
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
})

emitsprops一样,可以接受对象作为验证参数

移除了v-on.native修饰符

Vue中,传递给带有v-on的组件的事件监听器,只有通过this.$emit触发,要将原生DOM监听器添加到子组件的根元素上,需要使用.native修饰符

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

在Vue3中,.native已经被移除,同时,上面提到的emits选项允许组件定义真正会被触发的事件,而为包含在emits选项中的事件监听器,Vue会把它们作为原生事件监听器添加到子组件的根元素中(除非在子组件中设置了inheritAtts: false

<script>
  export default {
    emits: ['close']
  }
</script>

这样click事件就会添加到my-component的根元素上

要特别注意,需要将要出发的事件添加到emits中,否则就会出现事件被触发两次的问题,例如:

<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // without declared event
}
</script>

父组件中为mu-button添加click监听器:

<my-button v-on:click="handleClick"></my-button>

这时click会被触发两次:

  • emit触发一次
  • 因为emits选项中未定义,所以my-button上定义的handleClick会被添加到子组件的根元素上,再次被触发

事件API

Vue2中的$on$off$once方法被移除了,也就是说在Vue3中,无法在通过下面的形式创建全EventHub全局事件监听器:

// eventHub.js

const eventHub = new Vue()
export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'

export default {
  mounted() {
    // 添加 eventHub 监听器
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // 移除 eventHub 监听器
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event') // 当 ChildComponent 被挂载,控制台中将显示一条消息
    }
  }
}

Vue3移除了上述API,推荐使用mitt或者tiny-emitter来实现全局事件监听器

过滤器

Vue2中的过滤器被移除了,建议使用方法调用或者计算属性替换

如果在应用中定义了全局过滤器,可以通过全局属性在所有组件中使用:

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

然后通过$filters对象修改所有模板:

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

注意此方式只能应用在方法中,不能在计算属性中使用,因为计算属性只有在单个组件的上下文中定义才有意义

多根节点组件支持

Vue中不支持多根节点组件,所以需要使用<div>包裹多个组件:

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue3中组件支持包含多个根节点,但是需要开发者显示定义Attribute应该分布在哪个元素或者组件上:“

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

全局API

createApp

Vue中通过new Vue()创建根Vue实例,从同一个Vue构造函数创建的每个根实例共享相同的全局配置,导致了两个问题:

  1. 测试期间,全局配置很容易污染测试用例
  2. 同一个页面上的多个Vue副本无法使用不同的全局配置
// 这会影响两个根实例
Vue.mixin({
  /* ... */
})

const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

为了避免这个问题,引入了新的全局APIcreateApp,调用它返回一个应用实例:

import { createApp } from 'vue'

const app = createApp({})

在Vue中任何全局改变Vue的行为的API都移动到了应用实例上:

Vue3-03 从Vue2迁移

config.ingoredElements替换为config.isCustomElement

使用config.isCustomElement可以支持原生自定义元素,取值是一个函数,符合这个函数返回值的标签名都不会编译为Vue组件,而是作为原生的自定义元素出现

// Vue2.x
Vue.config.ignoredElements = ['my-el', /^ion-/]

// Vue3.x
const app = createApp({})
app.config.isCustomElement = tag => tag.startsWith('ion-')

Vue3中元素是否是Vue组件的检查是在模板编译阶段完成的,因此只有在使用运行时编译器才考虑配置此选项,回事在Vue CLI的配置中新的顶层选项

Vue.prototype替换为config.globalProperties

Vue2中通过为Vue的原型Vue.prototype添加属性,让所有组件都可以访问, 例如:

// 之前 - Vue 2
Vue.prototype.$http = () => {};

// 组件中
this.$http();

在Vue中被替换为config.globalProperties

// 之后 - Vue 3
const app = createApp({})
app.config.globalProperties.$http = () => {}

如果在选项是API中,仍然使用this.$http访问

要注意,如果使用了TypeScript,直接访问this.$http会报错,需要在shims-vue.d.ts添加如下的定义:

// Vue 原型上添加的东西,需要在此定义
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $http: () => {};
  }
}

具体可以参考这里

使用provide在编写插件时非常有用,可以替代globalProperties

全局Tree Shaking

在Vue2中,例如Vue.nextTick等AAPI,无法通过Webpack的tree-shaking移除,在Vue3.0中对全局和内部API进行了冲过,全局API只能通过ES模块构建的命名导出进行文旦,例如使用nextTick时:

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有关的东西
})

这样可以更好的支持Webpack的tree-shaking,Vue应用程序中未使用的全局API会从最终打包的产出中消除,减小打包体积

key属性

key不能相同,并且在Vue2中,<template>不能拥有key属性,需要为每个子节点设置key

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

在Vue3中则可以设置在<template>上了

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

按键修饰符

Vue2中支持keyCodes作为修改v-on方法的途径:

<!-- 键码版本 -->
<input v-on:keyup.13="submit" />

<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />

由于keyboradEvent.keyCode不再被推荐使用,所以建议对任何要用作修饰符的键使用kebab-cased大小写名称

移除$listeners

Vue2中的事件监听器通过$listeners访问,在Vue3中$listeners被移除了,事件监听器是$attrs的一部分,事件监听器现在只是以on为前缀的Attribute

Props默认函数中不能访问this

生成Prop默认值的工厂函数不能再访问this(虽然我以前也没这么用过),可以将组件接收到的原始Prop作为参数传递给默认函数,也可以在默认函数中使用Inject API

import { inject } from 'vue'

export default {
  props: {
    theme: {
      default (props) {
        // `props` 是传递给组件的原始值。
        // 在任何类型/默认强制转换之前
        // 也可以使用 `inject` 来访问注入的 property
        return inject('theme', 'default-theme')
      }
    }
  }
}

渲染函数

  • 函数h从Vue中导入,不再作为参数传递给render函数
  • 渲染函数参数更改,有状态组件和函数组件之间更一致
  • VNode的Prop结构更扁平
  • 注册组件时不能在使用字符串ID隐式查找已注册组件,需要使用导入的resolveComponent方法
// 2.x
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  }
  template: `
    <button @click="count++">
      Clicked {{ count }} times.
    </button>
  `
})

export default {
  render(h) {
    return h('button-counter')
  }
}

// 3.x
import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}

详细的参考渲染函数的介绍

插槽统一

移除了$scopedSlots,同时插槽定义为当前节点的子对象:

// 3.x Syntax
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})

需要以编程方式引用时,都被统一到了$slots中:

// 2.x 语法
this.$scopedSlots.header

// 3.x 语法
this.$slots.header()

过渡CSS类名更改

v-enter更改为v-enter-fromv-leave更改为v-leave-from

<transition-group>过渡组件

<transition-group>不再默认渲染根元素,但仍然可以用tagprop创建根元素。

v-model.sync

Vue2中

Vue2中在组件上使用v-model相当于绑定了value的Prop和input事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果需要将属性或事件名更改为其他名称,需要在子组件中添加model选项进行修改:

<!-- ParentComponent.vue -->
<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

某些情况下需要对一个Prop进行『双向绑定』,在Vue中可以使用update:propName来抛出事件,例如对于上面的ChildComponent来说,可以通过下面的方法更新父元素中的title

this.$emit('update:title', newValue)

父组件中可以监听该事件并更新本地数据:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

.sync修饰符就是上面的代码的语法糖:

<ChildComponent :title.sync="pageTitle" />

Vue3中

Vue3里面,自定义组件的v-model相当于传递了modelValue的Prop,并接受抛出的update:modelValue事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

如果要更改v-model传递的Prop名称,不再需要去子组件中配置model选项,而是给v-model传递一个参数即可:

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

这也可以作为.sync的替代,所以.sync就没有用武之地了,所以在Vue2中的sync直接替换为v-model即可

<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->
<ChildComponent v-model:title="pageTitle" />

同时在同一个组件上,可以同时使用多个v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写: -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

v-model自定义修饰符

Vue2中v-model提供了.trimlazy.number内置修饰符,Vue3中还提供了自定义修饰符的能力。

添加到v-model的修饰符通过modelModifiersProp 提供给组件,它接受一个default的对象,取值是一个函数,这个函数会返回一个对象,当父组件没有提供v-model的修饰符时,会从这个函数返回的对象里面取值

注意,modelModifiers是一个Prop,不是Vue实例的选项,它提供的并不是修饰符具体逻辑的实现,而是提供组件默认包含哪些修饰符,取值是布尔值

请注意,当组件的created生命周期钩子触发时,modelModifiersProp会包含capitalize,且其值为true——因为capitalize被设置在了写为v-model.capitalize="myText"v-model绑定上。

建议把组件中定义的修饰符显式的写在modelModifiersProp中,这样可以为TypeScript版本的组件提供正确的类型推导,也便于一眼看出组件中使用了哪些修饰符

另外,v-model自定义修饰符也支持多级串联

<v-model-child v-model.capitalize.test="msg" />

v-model-child组件中,我们会检查props.modelModifiers是否包含capitalizetest,并且编写一个处理器来更改emit发出的值:

<template>
  <label>
    请输入:
    <input :value="modelValue" @input="onInput" />
  </label>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'v-model-child',
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({
        capitalize: true
      })
    }
  },
  emits: ['update:modelValue'],
  setup(props, {emit}) {
    const capitalize = (val: string) => val.charAt(0).toUpperCase() + val.slice(1);
    const isCapitalize = props.modelModifiers && props.modelModifiers.capitalize;

    const onInput = (e: {target: HTMLInputElement}) => {
      const originValue = e.target.value;
      const value = isCapitalize ? capitalize(originValue) : originValue;
      emit('update:modelValue', value);
    };

    return {
      onInput
    };
  }
});
</script>

对于带有参数的(即自定义model使用的Prop名的v-modelv-model绑定,生成的自定义修饰符的Prop名称为参数名 + "Modifiers"

<my-component v-model:description.capitalize="myText"></my-component>
app.component('my-component', {
  props: ['description', 'descriptionModifiers'],
  emits: ['update:description'],
  template: `
    <input type="text"
      :value="description"
      @input="$emit('update:description', $event.target.value)">
  `,
  created() {
    console.log(this.descriptionModifiers) // { capitalize: true }
  }
})

v-forv-if的优先级

Vue2中,在同一个元素上应用v-ifv-forv-for优先级更高,而Vue3中v-if的优先级更高,也就是说v-if将没有权限访问v-for里面的变量,下面的代码会报错:

<!-- This will throw an error because property "todo" is not defined on instance. -->

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

所以要尽量避免在同一个元素上使用v-forv-if,可以把v-for移动到<template>中来修正:

<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

v-bind合并行为

Vue2中,如果一个元素同时定义了v-bind="object"和一个相同的单独的Property,那么单独的Property会覆盖object中的绑定:

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>

<!-- result -->
<div id="red"></div>

在Vue3中覆盖结果取决于声明绑定的书序,后面绑定的结果会覆盖前面的绑定结果:

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

对数组的监听

在Vue3中,使用watch监听一个数组时,默认只有数组被替换时才会触发回调,数组成员改变时不会触发回调,如果希望在数组改变时触发需要添加deep参数

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}
上一篇:vue2的$refs在vue3组合式API中的替代方法


下一篇:Vue2.x 的双向绑定原理及实现