Vue2和Vue3差异

1. 全局的API改变
   Vue2是单实例的，添加全局的配置就是在Vue上面添加，比如prototype,Minxins
   Vue3多实例的，使用createApp创建多个实例，然后配置添加到创建的实例之上

   API改变：

   1. Vue.extend 移除
      Vue.extend 创建一个Vue的组件的构造器，然后new出来mount到Dom上
      现在createApp直接就能完成这些，不在需要
   2. Vue.config.ignoredElements --> app.config.compilerOptions.isCustomElement

      	// 之前
      	Vue.config.ignoredElements = ['my-el', /^ion-/]
      	
      	// 之后
      	const app = createApp({})
      	app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('ion-')
      

   3. Vue.prototype --> app.config.globalProperties

2. use
   umd的插件之前可以直接window.use(XXX),现在没有window上的Vue，必须使用createApp的实例上use

3. 多个应用共享配置的方式

   import { createApp } from 'vue'
   import Foo from './Foo.vue'
   import Bar from './Bar.vue'
   
   const createMyApp = (options) => {
     const app = createApp(options)
     app.directive('focus' /* ... */)
   
     return app
   }
   
   createMyApp(Foo).mount('#foo')
   createMyApp(Bar).mount('#bar')
   

4. nextTick()
   nextTick() 现在是vue中导出的一个可以tree-shaking的函数
   不能直接使用vue.nextTick()

5. Vue.observable (用 Vue.reactive 替换)

6. v-model

   // 2.0
   <ChildComponent v-model="pageTitle" />
   <!-- 是以下的简写: -->
   <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
   // 如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：
   export default {
     model: {
       prop: 'title',
       event: 'change'
     },
     props: {
       // 这将允许 `value` 属性用于其他用途
       value: String,
       // 使用 `title` 代替 `value` 作为 model 的 prop
       title: {
         type: String,
         default: 'Default title'
       }
     }
   }
   // 这个时候v-model是以下的简写
   <ChildComponent :title="pageTitle" @change="pageTitle = $event" />
   
   <ChildComponent :title.sync="pageTitle" />
   <!-- 是以下的简写: -->
   <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
   

   // 3.0
   <ChildComponent v-model="pageTitle" />
   
   <!-- 是以下的简写: -->
   
   <ChildComponent
     :modelValue="pageTitle"
     @update:modelValue="pageTitle = $event"
   />
   // 带参数的时候就可以代替.sync 修饰符
   <ChildComponent v-model:title="pageTitle" />
   
   <!-- 是以下的简写: -->
   
   <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
   
   

   迁移策略

   // 带参数
   <ChildComponent :title.sync="pageTitle" />
   
   <!-- 替换为 -->
   
   <ChildComponent v-model:title="pageTitle" />
   
   // 不带参数 请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue
   <ChildComponent v-model="pageTitle" />
   export default {
     props: {
       modelValue: String // 以前是`value：String`
     },
     emits: ['update:modelValue'],
     methods: {
       changePageTitle(title) {
         this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
       }
     }
   }
   

7. v-for 的 key
   在 Vue 2.x 中， 标签不能拥有 key。不过，你可以为其每个子节点分别设置 key
   在 Vue 3.x 中，key 则应该被设置在 标签上。

   <!-- Vue 2.x -->
   <template v-for="item in list">
     <div :key="'heading-' + item.id">...</div>
     <span :key="'content-' + item.id">...</span>
   </template>
   <!-- Vue 3.x -->
   <template v-for="item in list" :key="item.id">
     <div>...</div>
     <span>...</span>
   </template>
   

8. 两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级。

9. v-on 的 .native 修饰符已被移除。

10. 异步组件的使用改变
    使用新的defineAsyncComponent方法定义
    高阶用法中的component被重命名为loader
    loader函数不再接受resolve和reject参数，必须是返回一个Promise

    const asyncModal = () => import('./Modal.vue')
    const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
    
    const asyncModal = {
      component: () => import('./Modal.vue'),
      delay: 200,
      timeout: 3000,
      error: ErrorComponent,
      loading: LoadingComponent
    }
    const asyncModalWithOptions = defineAsyncComponent({
      loader: () => import('./Modal.vue'),
      delay: 200,
      timeout: 3000,
      errorComponent: ErrorComponent,
      loadingComponent: LoadingComponent
    })
    

11. Vue3定义了一个emits的选项，定义组件向父级组件触发的事件
    删除了 .native 没有声明的事件都会算入$attrs默认绑定到根节点上

12. 渲染函数
    h 是全局导入的不是作为render的参数
    2.0中h可以直接传递组件名称，
    3.0 VNode是上下文无关的，不能在ID查找组件，需要使用resolveComponent

    
    export default {
      render(h) {
        return h('button-counter')
      }
    }
    
    export default {
      setup() {
        const ButtonCounter = resolveComponent('button-counter')
        return () => h(ButtonCounter)
      }
    }
    

13. 移除 this.$scopedSlots,使用this.$slots
    this.$slots.mySlot 替换为 this.$slots.mySlot()
    移除 $listeners ，把他放到了 $attrs 中
    $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style。

14. prop的默认函数中不再能访问this

    • 函数接受prop作为参数
    • 在函数中可以使用inject

    import { inject } from 'vue'
    
    export default {
      props: {
        theme: {
          default (props) {
            // `props` 是传递给组件的、
            // 在任何类型/默认强制转换之前的原始值，
            // 也可以使用 `inject` 来访问注入的 property
            return inject('theme', 'default-theme')
          }
        }
      }
    }
    

15. 组件选项data的生命只能是一个函数，不能是一个object
    合并mixin中的data时，浅合并只合并根级属性

    const Mixin = {
      data() {
        return {
          user: {
            name: 'Jack',
            id: 1
          }
        }
      }
    }
    
    const CompA = {
      mixins: [Mixin],
      data() {
        return {
          user: {
            id: 2
          }
        }
      }
    }
    // 2.0
    {
      "user": {
        "id": 2,
        "name": "Jack"
      }
    }
    // 3.0
    {
      "user": {
        "id": 2
      }
    }
    

16. 在 Vue 2.x 中，当挂载一个具有 template 的应用时，被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中，被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML。

17. 不再支持使用数字 (即键码) 作为 v-on 修饰符, 不再支持 config.keyCodes

18. propsData 选项之前用于在创建 Vue 实例的过程中传入 prop，现在它被移除了。如果想为 Vue 3 应用的根组件传入 prop，请使用 createApp 的第二个参数。