vue2升3不靠谱指南

1、Vue全局命令替换为app.XXX

为了能在一个页面使用多个vue的实例，并且不相互污染。原本的Vue.XXX都替换成app.XXX

20211106161340.png

2、原本Vue上的实例方法变为静态导出。

不再能直接Vue.nextTick(),而需要先从Vue当中导出nextTick再使用。

为了支持Vue的tree-shake，这些没有用到的方法不再会被webpack打包进去。减少体积。

// 原本
import Vue from 'vue'

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

// ---------------------------------------

// Vue3
import { nextTick } from 'vue'

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

受影响的API
Vue.nextTick
Vue.observable (用 Vue.reactive 替换)
Vue.version
Vue.compile (仅完整构建版本)
Vue.set (仅兼容构建版本)
Vue.delete (仅兼容构建版本)

3、v-model语法修改

为了支持自定义组件可以有多个双向绑定值

1、.sync的部分替换为v-model的新用法。

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

<!-- 替换为 -->

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

2、不带参数的v-model,确保其子组件的prop和event替换成了modelValue和update:modelValue

// 组件
<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  props: {
    modelValue: String // 以前是`value：String`
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title) // 以前是`this.$emit('input', title)`
    }
  }
}

4、v-if v-for在同一元素运用时优先级改变

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用

3.x 版本中 v-if 总是优先于 v-for 生效。

(不要在同一元素上同时使用v-if v-for，以避免歧义)

5、v-bind="object" 现在排序敏感

原本直接写的同名组件参数会更加优先。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>

现在顺序敏感

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="blue"></div>

<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>

(尽量不要同时存在两种语法，如果必须，请注意顺序)

6、 v-on的.native修饰符删除

v-on 的 .native 修饰符已被移除。同时，新增的 emits 选项允许子组件定义真正会被触发的事件。

(删除 .native 修饰符的所有实例。
确保所有组件都使用 emits 选项记录其事件。)

7、只能使用普通函数创建函数式组件

8、异步组件写法改变

9、组件事件现在需要在 emits 选项中声明

Vue 3 现在提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。

提供事件验证，处理原生事件的问题(移除了.native修饰)

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

(如果没写, 组件上的事件接收函数会被出发两次。一次来自Vue的事件，一次来自原生事件)

10、生命周期更名

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount

简要升级指南

1. 检查component、directive等全局变量，替换成app实例方法。
2. 检查组件中使用了nextTick、observable等方法。
3. 检查使用了v-model的组件，value和input事件替换。
4. 检查是否有同时在一个元素上使用了v-if和v-for。
5. 检查使用v-bind时是否同时又注入了属性
6. 检查删除.native修饰符。
7. 检查函数式组件是否正确。
8. 检查异步组件的写法是否正确。
9. 检查每个组件的事件是否已经在emits项中声明。
10. 检查destroyed、beforeDestroy生命周期名字是否变更。