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。即：

意味着

• 现在可以在同一个组件上使用多个 v-model 进行双向绑定。例如：

意味着

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

• 现在可以自定义v-model的修饰符，比如自定义一个事件叫capitalize，于是写成，我打算更新pageTitle之前先将首字母大写。那么子组件需要这么写：

  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