CyanSalt's Scrapbook
Vue 3 迄今为止确定的新特性
CyanSaltView on GitHub
👍2

1. Composition API

最核心的改动之一，详见 https://vue-composition-api-rfc.netlify.com/api.html

2. 全局 API 修改

以下方法现在由 Vue 导出，而不是挂载在 Vue 对象上：

  • nextTick
  • observable
  • version
  • compile
import { nextTick } from 'vue'

3. createApp

$mount 的挂载方式被移除，新的挂载方式为

import { createApp } from 'vue'

const app = createApp()
app.mount(App, '#app', rootProps)

行为也略有差异：新的 mount 将以元素的 innerHTML 作为模板（2.x 中是 outerHTML），因此 mount 不会替换根元素，而是替换其子元素。

另外，全局的 Vue.use/mixin/component/directive 也被替换为 app.use 等

全局配置 Vue.config 也被修改为 app.config。原有的扩展 Vue.prototype 的方式被修改为

app.config.globalProperties.$message = () => {}

4. 新的 v-model 语法

原有的 :props.sync 与 v-model 合并，新的语法为

5. h 函数

h 函数现在是由 Vue 导出的，而不是 render 的参数。render 函数现在不再接受参数

import { h } from 'vue'

h 的第一个参数不再支持字符串格式的组件名

h 的第二个参数现在支持两个保留的生命周期 onVnodeMounted 和 onVnodeUpdated

6. 指令钩子函数修改

自定义指令的 bind、inserted、componentUpdated、unbind 更名为 beforeMount、mounted、updated、unmounted，同时添加了 beforeUpdate 和 beforeUnmount，删除了 update，以保持与组件生命周期一致。

此外，由于新的自定义指令被完整绑定在 vnode 上，因此当 v-bind="$attrs" 作用于组件时，自定义指令也将透传到对应的组件上。

7. 函数式组件被移除

在 Vue 3 中可以直接将一个函数声明为函数式组件了，接受的参数与 setup 一致，返回值与 render 一致

const FunctionalComponent = (props, { slots, attrs, emit }) => {
  // ...
}

在第二个参数 context 中，data（被 props 代替）、children（被 slots 代替）、injection（被 Composition API 的 inject 代替）、parent 都被移除了；listeners 被移入 attrs 中

由于函数类型被定义为函数式组件，原本使用 async function 的异步组件现在需要用 Vue 导出的 createAsyncComponent 包裹

8. VNode 格式修改

新的结构里除了 class 和 style 之外属性都是是铺平的，例如 vnode.on.click 现在是 vnode.onClick，vnode.domProps.innerHTML 现在是 vnode.innerHTML

9. Slots API 修改

原有的 this.$slots 被删除了，原有的 this.$scopedSlots 改为 $slots，亦即，现在 $slots 是一个值全部为函数的对象

10. 内置 transition 组件的变更

  • v-enter 和 v-leave 类被替换为 v-enter-from 和 v-leave-from，以保持和 v-enter-to 等一致；同理 enter-class 和 leave-class 两个 props 也被替换为 enter-from-class 等。
  • 将 transition 作为组件的根元素时，外部的 v-if 变化将不再触发过渡效果（在 2.x 中实际上是一个未定义的行为）

11. 移除废弃/不推荐使用的 API

  • Events API 被移除。Vue 的实例不再实现完整的 EventEmitter，而是只保留 $emit 方法（普通的事件处理推荐使用 https://github.com/developit/mitt ，hook events 被 Composition API 新的生命周期方法代替）
  • data 属性不再支持对象类型，而是仅支持函数类型
  • inline-template 不再支持
  • filters 不再支持（多数情况都可以用 methods 代替，并且考虑到 Pipeline Operator 已经有提案了）
  • v-on 不再支持 keyCode，例如 @keydown.13="submit"。这个特性已被浏览器废弃
Add comment
Powered by Sairin