美文网首页
Vue2.0迁到Vue3.0一句话总结

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

作者: microkof | 来源:发表于2020-06-06 14:09 被阅读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 实例方法已被移除

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

    十七、过滤器移除

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

    相关文章

      网友评论

          本文标题:Vue2.0迁到Vue3.0一句话总结

          本文链接:https://www.haomeiwen.com/subject/tpuxtktx.html