VUE 3.0 学习探索入门系列

在前面的文章中我们也聊了许多 Vue3.x 相比 Vue2.x 有哪些变化，也介绍了一些它的特点，今天就重点介绍下它新增的这些特性。

本文主要参考：vueschool.io/articles/vu…

总览

Compostion API 合成API
取消 Vue 全局变量
自定义指令 Directives API调整
Component 组件支持 v-model 指令
Fragments Template 支持有多个根节点
Suspense Template Fallback 组件
Teleport Template Dom占位传递组件

1 Compostion API 合成API

上一篇文章已经重点介绍过了。

查看：juejin.im/post/5e8010…

2 取消 Vue 全局变量

Vue2.x 中的代码片段：

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')
复制代码

Vue3.x 中取消了全局变量 Vue，改为实例函数 createApp() 创建实例对象。

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')
复制代码

RFC查看网友讨论：github.com/vuejs/rfcs/…

这个变化很大，将会给我们从 Vue2.x 升级到 Vue3.x 带来不小的工作量。

为什么这么改变？其实也好理解，Vue3.x 基于函数式编程，所以：一切皆函数。为了保证每个函数都有自己的小 圈子 能独立运行，所以从源头上就开始 开刀。

3 自定义指令 Directives API调整

Vue2.x 中自定义一个指令：

const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}
复制代码

Vue3.x 中变成了：

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

这可以算上是一个 breaking change 了，主要是在 Vue3.x 中生命周期函数的变化导致的。

查看上一篇文章，了解 Vue3.x 的生命周期有哪些变化：juejin.im/post/5e8010…

RFC看这里：github.com/vuejs/rfcs/…

4 Component 组件支持 v-model 指令

Vue2.x 中我们会把 v-model 用在一些表单元素上，用于数据的双向绑定。

<input v-model="property />
复制代码

但是，如果我们希望父子组件也能双向绑定时，Vue2.x 是不建议的，因为这会给父组件的维护带来灾难！

所以在 Vue2.x 中建议使用 this.$emit() 事件回传机制明确通知父组件，真正的更新还是父组件自己实现。

后来为了简化上述操作，在 Vue2.3.0 新增了 .sync 修饰符。

参考：cn.vuejs.org/v2/guide/co…

比如：父组件调用子组件 text-document 时，子组件就可以修改父组件的 doc.title。

<text-document v-bind:title.sync="doc.title"></text-document>
复制代码

好了，通过以上描述我们可以得出结论:

v-model 可以实现表单元素的数据双向绑定
v-bind:xxx.sync 或者简写为 :xxx.sync 可以实现父子组件的双向绑定

那么在 Vue3.x 中得到了统一：

:xxx.sync 将被 v-model:xxx 取代

如果你希望跟子组件直接双向绑定，则：

<text-document v-model="doc"></text-document>
复制代码

或者多个属性之间一一绑定：

<text-document 
    v-model:title="doc.title"
    v-model:content="doc.content"
></text-document>
复制代码

RFC查看网友讨论：github.com/vuejs/rfcs/…

5 Fragments Template 支持有多个根节点

Vue2.x 中 Template 模板你通常是这么写的：

<template>
    <div>
        <p>Hello</p>
        <p>Vue2.x</p>
    </div>
</template>
复制代码

在 template 中只能有唯一一个根节点。原因就是每个 Vue 的实例只允许绑定到唯一的Dom树上。

如果你希望绑定两个Dom，那么你就只能在新建一个 Vue 示例，但是这样就跟当前系统脱节了，没啥意义了。

或者使用这个插件：vue-fragments，类似于 React 中的 <React.Fragment>。

<template>
  <v-fragment>
    <div>Fragment 1</div>
    <div>Fragment 2</div>
  </v-fragment>
</template>
复制代码

但是在 Vue3.x 中，就可以不用唯一根节点，也不用插件了，变得简单了许多：

<template>
    <p>Hello</p>
    <p>Vue3.x</p>
</template>
复制代码

6 Suspense Template Fallback 组件

Vue2.x 中你应该会经常遇到这种场景：

<template>
    <div>
        <div v-if="!loading">
            ...
        </div>
        <div v-if="loading">Loading...</div>
    </div>
</template>
复制代码

或者安装这个插件：vue-async-manager

然后，就变成了：

<template>
    <div>
        <Suspense>
            <div>
                ...
            </div>
            <div slot="fallback">Loading...</div>
        </Suspense>
    </div>
</template>
复制代码

Vue3.x 感觉就是参考了上面这个组件的做法，现在可以这么写：

<Suspense>
  <template #default>
    ...
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>
复制代码

#fallback 其实在 Vue3.x 中就是 slot 的简写。所以，#default 可以省略。

当然 React 也有 Suspense 组件解决类似的问题。

其实，这个全局组件可能更多的会配合异步组件使用。顺便说下，在 Vue3.x 中，定义一个异步组件使用：defineAsyncComponent。

7 Teleport Template Dom占位传递组件

注意： teleport 是 3.0.0-alpha.11 刚改的名字，之前叫：portal，查看 CHANGELOG

Vue2.x 中你应该会经常遇到这种场景：

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <b> {{ user.name }} </b>  
    <button @click="isPopUpOpen = true">删除用户</button>
    
    <!-- 注意这一块代码 -->
    <div v-show="isPopUpOpen">
      <p>确定删除？</p>
      <button @click="removeUser">确定</button>
      <button @click="isPopUpOpen = false">取消</button>
    </div>
    
  </div>
</template>
复制代码

以上代码就是当我们需要做一个弹窗的时候，按照业务逻辑，弹窗和其他代码在一块写着。但是这么写往往会出现问题，就是一旦我们点击 “删除用户”，本希望弹窗显示，但是往往这个弹出框被外边的元素挡住！由于 z-index 的原因。

那我们就想方设法让这个弹出框直接挂在到 body 节点上，这样就没问题了。比如：可以通过 Javascript 追加这个弹出框到 body 中等，处理起来比较麻烦。

关键的问题是：业务逻辑被打断了，代码也不连贯了。

所以为了解决这个烦恼，Vue3新增了这个组件，现在你就可以这么写了。

在最外层的 App.vue 中：

<!-- 预留一块空地，专门用来显示这个容易被遮挡的层 -->
<div id="modal-container"></div>

<!-- app -->
<div id="app">
复制代码

在你自己的组件中：

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <b> {{ user.name }} </b>  
    <button @click="isPopUpOpen = true">删除用户</button>
    
    <!-- 注意这一块代码 -->
    <Teleport to="#modal-container">
        <div v-show="isPopUpOpen">
          <p>确定删除？</p>
          <button @click="removeUser">确定</button>
          <button @click="isPopUpOpen = false">取消</button>
        </div>
    </Teleport>
    
  </div>
</template>
复制代码