vue 3 与 vue2 的改变

vue3

记录 v3 版本的改变

• v-ref变化 在v-for上 之前会生成数组返回， 现在需要自定义函数来保存每个项

• 新增异步组件 defineAsyncComponent 定义， 与 react loadable相似。 component 选项重命名为 loader。

• $attrs 变化 之前 class style 不会在数组里 3版本后会在

• $children 实例属性 删除不再支持 ， 需要用ref。

• 自定义指令改变，不兼容 ，声明周期名称和 组件生命周期保持一致。

• data选项 改为必须为返回值为 object 的 function ，另外 Mixin 合并行为变更，当来自组件的 data() 及其 mixin 或 extends 基类被合并时，现在将浅层次执行合并:

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

<!--v2:-->

{
  user: {
    id: 2,
    name: 'Jack'
  }
}

<!--v3-->
{
  user: {
    id: 2
  }
}

• 新增 emits 与之前的props相似， 如果不写emits属性 会把$emit添加到$attrs里， attrs会添加到组件的根属性上。 所以尽量写上， native修饰符已经取消的原因， 会容易造成绑定两次事件

• 事件API 删除 $on$off $once , 所以之前的事件车 even bus 不能用 了，$emit 不取消， 因为用于触发由父组件声明式添加的事件处理函数。

• 过滤器 删除 之前的管道符 | ， 之后用computed 计算出。 也可以用全局过滤器：

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

• 片段： Vue 3 现在正式支持了多根节点的组件，也就是片段！

• 一个新的全局 API：createApp

2.x 全局 API	3.x 实例 API (app)
Vue.config	app.config
Vue.config.productionTip	removed (见下方)
Vue.config.ignoredElements	app.config.isCustomElement (见下方)
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use (见下方)
Vue.prototype	app.config.globalProperties	(见下方)

prototype 替换为 config.globalProperties、 全局api 替换为 import 模块方式， $nextTick 也变为 import方式引出

• 新增：对于 v-if/v-else/v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。 非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你不能通过故意使用相同的 key 来强制重用分支。 非兼容：