Vue2.0迁到Vue3.0一句话总结

2020-06-06  本文已影响0人  microkof

只考虑迁移,不考虑新特性。

一、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

<ChildComponent v-model="pageTitle" />

意味着

<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
<ChildComponent v-model:title="pageTitle" />

意味着

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

其中title是子组件的prop,pageTitle是父组件的一个data。

<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 实例方法已被移除

不过可能你从没用过这三个实例方法。

十七、过滤器移除

建议用过程计算和计算属性来取代。

上一篇下一篇

猜你喜欢

热点阅读