Vue 3 中让人激动的新特性

本贴最后更新于 358 天前,其中的信息可能已经渤澥桑田

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

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 379 回帖 • 4 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    25 引用 • 83 回帖 • 1 关注
  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    205 引用 • 625 回帖 • 526 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Lee981265
    捐赠者

    提前学习一下 😄

    1 回复
  • Vanessa
    作者

    了解一下就好了,有可能会修改