Vue2.0迁到Vue3.0一句话总结
只考虑迁移,不考虑新特性。
一、createApp
不需关注,反正main.js里已有。
二、其他API
2.x 全局 API | 3.x 实例 API (app ) |
说明 |
---|---|---|
Vue.config | app.config | 不需关注 |
Vue.config.productionTip | 移除 | 不需关注 |
Vue.config.ignoredElements | app.config.isCustomElement | 不需关注 |
Vue.component | app.component | 关注 |
Vue.directive | app.directive | 关注 |
Vue.mixin | app.mixin | 关注 |
Vue.use | app.use | 关注 |
三、nextTick
import { nextTick } from 'vue'
四、v-model
- v-model修改的默认属性由
value
变成了modelValue
,监听的默认事件从input
变成update:modelValue
。即:
<ChildComponent v-model="pageTitle" />
意味着
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
- 现在可以在同一个组件上使用多个 v-model 进行双向绑定。例如:
<ChildComponent v-model:title="pageTitle" />
意味着
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
其中title
是子组件的prop,pageTitle
是父组件的一个data。
- 现在可以自定义v-model的修饰符,比如自定义一个事件叫
capitalize
,于是写成<ChildComponent v-model.capitalize="pageTitle" />
,我打算更新pageTitle
之前先将首字母大写。那么子组件需要这么写:
<input type="text" :value="modelValue" @input="emitValue">
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
}
也就是说,prop加上一个modelModifiers
,它是一个对象,指向修饰符。然后判断修饰符是否存在,存在的话就先处理然后emit,并没有什么神秘的地方。
如果v-model又带参数又带修饰符呢?prop名称就不是modelModifiers
了,而是参数
+Modifiers
组成的名称,比如titleModifiers
。其他的道理一样,不多说了。
五、v-bind
v-bind的.sync
修饰符和组件的model
选项已移除,可用v-model
作为代替。
六、key
<template v-for>
的key应该设置在<template>`标签上 (Vue 2.0是设置在它的子节点上)。
七、v-if和v-for的优先级变了
现在v-if总是优先于v-for生效,但依然不建议同时使用它俩。
八、v-for里的ref不再用于注册数组,而是注册一个函数
现在v-for里面的元素如果要绑定ref,应当绑定一个函数:
<div v-for="item in list" :ref="setItemRef"></div>
然后,应当有一个数组data用于存放元素,setItemRef的写法应当是:
const setItemRef = el => {
itemRefs.push(el)
}
同时写2个钩子,其中onBeforeUpdate是为了防范元素丢失,如果你确定不可能丢失,那么不用写这2个钩子:
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
itemRefs 不必是数组:它也可以是一个对象,其 ref 会通过迭代的 key 被设置。
如果需要,itemRef 也可以是响应式的且可以被监听。
九、函数式组件
内容比较高阶,看https://v3.cn.vuejs.org/guide/migration/functional-components.html#单文件组件-sfc
十、自定义指令
bind → beforeMount
inserted → mounted
beforeUpdate:新的!这是在元素本身更新之前调用的,很像组件生命周期钩子。
update → 移除!有太多的相似之处要更新,所以这是多余的,请改用 updated。
componentUpdated → updated
beforeUnmount:新的!与组件生命周期钩子类似,它将在卸载元素之前调用。
unbind -> unmounted
由于不是基础内容,具体见:https://v3.cn.vuejs.org/guide/migration/custom-directives.html#概览
十一、过渡动画
一些转换 class 被重命名了:
v-enter -> v-enter-from
v-leave -> v-leave-from
十二、watch
不再支持以点分隔的字符串路径,请改用计算函数作为参数。
十三、生命周期
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
十四、prop
prop的default函数里不可以再访问this
十五、<template>
<template>必须带着v-if/else-if/else、v-for 或 v-slot,否则会被视为普通元素。不过通常就是会带着这些。
十六、$on,$off 和 $once 实例方法已被移除
不过可能你从没用过这三个实例方法。
十七、过滤器移除
建议用过程计算和计算属性来取代。