总结vue2和vue3发生的差异

1. 脚手架的转移

• 官网更加建议使用Vite进行vue3项目的构建（打包和构建更加快速）。
• 状态管理推荐使用pinia（去除了mutation），action可以直接修改状态（vuex中action是不能修改状态的）。
• vscode  Vetur不在支持vue3，建议删除使用Volar。
• vue3更好的支持TypeScript，也更好的支持jsx语法。

2.全局Api

• vue2是将属性和方法挂载到vue实例上，现在是挂到app上（vue2通过vue-prototype，vue3通过getCurrentInstance().proxy）

3. 模板指令

•   v-model差异

  <child-view :value="text" @input="(e) => text = e.target.value" />
  
  // 简写
  
  <child-view v-model="pageTitle"/>
  
  //<child-view :title.sync="pageTitle"/>
  
  <child-view :title="pageTitle" @update:title="pageTitle = $event" />
  
  // vue2写法
  // 子组件内部
   model: {
      prop: 'title',
      event: 'change'
    },
    props: {
      // 默认写法
      value: {
        type: String
      },
      title: {
        type: String
      }
    },
  
  methods: {
      change (e) {
          // 默认写法
        // this.$emit('input', e.target.value)
        this.$emit('change', e.target.value)
        // this.$emit('update:title', e.target.value)
      }
    },

  vue3改变
  
  <ChildComponent
    :modelValue="pageTitle"
    @update:modelValue="pageTitle = $event"
  />
  
  // 简写
  
  <ChildComponent v-model="pageTitle" />
  <ChildComponent v-model:title="pageTitle" />
  
  <ChildComponent
    :title="pageTitle"
    @update:title="pageTitle = $event"
  />

  总结：vue3中v-model：title  是将vue2中 :title.sync写法相同。

• vue2  中v-if 需要加key值，vue3不在需要，因为如果您不提供unique ，现在会在条件分支上自动生成它们。vue2中在循环的标签上加key  vue3需要在template上加key

• v-if和v-for优先级。vue2中v-for优先级较高，vue3中v-if优先级较高。

• v-bind合并行为。

  // vue2中 id="red"会覆盖 v-bind="{ id: 'blue' }"
  
  <!-- template -->
  <div id="red" v-bind="{ id: 'blue' }"></div>
  <!-- result -->
  <div id="red"></div>
  
  
  // vue3中
  
  <!-- template -->
  <div id="red" v-bind="{ id: 'blue' }"></div>
  <!-- result -->
  <div id="blue"></div>