Vue 3 中让人激动的新特性

2019-10-31

Composition API

Composition API 是一组基于功能的附加的 API，他允许对组件之间的逻辑进行灵活的组合，他将组件属性中当前可用的机制公开为 JavaScript 函数。更多可查看 Composition API RFC

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => console.log('component mounted!'))

    return {
      count,
      double,
      increment
    }
  }
}
</script>

Global mounting/configuration API change

此 API 修改的讨论可参见 PR 29，这意味着将来可能会被修改。

Before

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')

After

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')

Fragments

类似 React.Fragment 和 Vue 2 中的 vue-fragments 库。

<template>
  <div>Hello</div>
  <div>World</div>
</template>

Suspense

Suspense 会延迟你的组件渲染，当某个条件触发时才会回调渲染该组件。你可以把他当成一个有 slots 的组件。在 Suspended-component 完全渲染前，回调绑定将会一直展现。Suspense 不仅可以等待异步组件的下载，也可以等待 setup 函数中异步操作的执行。

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

Multiple v-models

你不仅可以设置 v-model 属性的名称，还可以根据自己的需求设置多个。此 API 修改的讨论可参见 PR 31，这意味着将来可能会被修改。

<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
/>

Portals

类似 React 中的 portals 和 Vue 2 中的 portal-vue 库。

<portal to="destination">
  <p>This slot content will be rendered wherever thportal-target with name 'destination'
    is  located.</p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App.
  The slot content of the above portal component wilbe rendered here.
  -->
</portal-target>

New custom directives API

略微的变化让其和组件的生命周期更好的保持一直。此 API 修改的讨论可参见 PR 32，这意味着将来可能会被修改。

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // new
  unmounted() {}
}

其他

更多特性可查看 Vue RFCs repository。

返回总目录

每天 30 秒系列之前端资讯

摘自

Exciting new features in Vue 3