vue3 快速入门系列 —— 其他API

其他章节请看：

vue3 快速入门 系列

他API

前面我们已经学习了 vue3 的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2 和 vue3 的改变。

浅层响应式数据

shallowRef

shallow 中文：“浅层的”

shallowRef：浅的 ref()。

先用 ref 写个例子：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>a: {{ a }}</p>
    <p>o: {{ o }}</p>
    <p><button @click="change1">change1</button></p>
    <p><button @click="change2">change2</button></p>
    <p><button @click="change3">change3</button></p>
    <p><button @click="change4">change4</button></p>
</template>

<script lang="ts" setup name="App">
import {ref, shallowRef} from 'vue'

let a = ref(0)
let o = ref({
    name: 'p',
    age: 18
})

function change1 (){
    a.value = 1
}
function change2 (){
    o.value.name = 'p2'
}
function change3 (){
    o.value.age = 19
}
function change4 (){
    o.value = {name: 'p3', age: 20}
}
</script>

这4个按钮都会触发页面数据的变化。

现在将 ref 改成 shallowRef，其他都不变。你会发现只有 change1 和 change4 能触发页面数据的变化：

<!-- ChildA.vue -->
<template>
   // 不变
</template>

<script lang="ts" setup name="App">
import {ref, shallowRef} from 'vue'

let a = shallowRef(0)
let o = shallowRef({
    name: 'p',
    age: 18
})

function change1 (){
    a.value = 1
}
function change2 (){
    o.value.name = 'p2'
}
function change3 (){
    o.value.age = 19
}
function change4 (){
    o.value = {name: 'p3', age: 20}
}
</script>

这是因为 change1 中的 a.value 是浅层，而 change2 中的 o.value.name 是深层。

对于大型数据结构，如果只关心整体是否被替换，就可以使用 shallowRef，避免使用 ref 将大型数据结构所有层级都转成响应式，这对底层是很大的开销。

shallowReactive

知晓了 shallowRef，shallowReactive也类似。

shallowReactive：浅的 reactive()。

请看示例：

现在3个按钮都能修改页面数据：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>o: {{ o }}</p>
    <p><button @click="change2">change2</button></p>
    <p><button @click="change3">change3</button></p>
    <p><button @click="change4">change4</button></p>
</template>

<script lang="ts" setup name="App">
import {reactive} from 'vue'

let o = reactive({
    name: 'p',
    options: {
        age: 18,
    }
})

function change2 (){
    o.name = 'p2'
}
function change3 (){
    o.options.age = 19
}
function change4 (){
    o = Object.assign(o, {name: 'p3', options: {age: 20}})
}

</script>

将 reactive 改为 shallowReactive:

import {shallowReactive} from 'vue'

let o = shallowReactive({
    name: 'p',
    options: {
        age: 18,
    }
})

现在只有 change2 和 change4 能修改页面数据，因为 change3 是多层的，所以失效。

只读数据

readonly

readonly : Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original.

readonly 能传入响应式数据，并返回一个只读代理

请看示例：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>name: {{ name }}</p>

    <p><button @click="change1">change name</button></p>

    <p>copyName: {{ copyName }}</p>

    <p><button @click="change2">change copyName</button></p>
</template>

<script lang="ts" setup name="App">
import {ref, readonly} from 'vue'
let name = ref('p')
// 传入一个响应式的数据，返回一个只读代理
// reactive 数据也可以
// name 数据的修改，也会同步到 copyName
let copyName = readonly(name)

// 类型“number”的参数不能赋给类型“object”的参数。ts
// let copyName = readonly(2)

function change1(){
    name.value = 'p2'
}

function change2(){
    // 通过代理修改数据
    // vscode 报错：无法为“value”赋值，因为它是只读属性。ts
    copyName.value = 'p3'
}
</script>

浏览器呈现：

# 组件A

name: p2
// 按钮1
change name

copyName: p2
// 按钮2
change copyName

点击第一个按钮，发现 copyName 的值也跟着变化了（说明不是一锤子买卖），但是点击第二个按钮，页面数据不会变化。浏览器控制台也会警告：

[Vue warn] Set operation on key "value" failed: target is readonly. RefImpl {__v_isShallow: false, dep: Map(1), __v_isRef: true, _rawValue: 'p2', _value: 'p2'}

readonly 只读代理是深的：任何嵌套的属性访问也将是只读的。对比 shallowReadonly 就知道了。

Tip：使用场景，比如同事A定义了一个很重要的数据，同事B需要读取该数据，但又担心误操作修改了该数据，就可以通过 readonly 包含数据。

shallowReadonly

readonly 只读代理是深层的，而 shallowReadonly 是浅层的。也就是深层的 shallowReadonly 数据不是只读的。

请看示例：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>obj: {{ obj }}</p>

    <p><button @click="change1">change1</button></p>
    <p><button @click="change2">change2</button></p>
</template>

<script lang="ts" setup name="App">
import {ref, reactive, shallowReadonly} from 'vue'
let obj = reactive({
    name: 'p',
    options: {
        age: 18,
    }
})

let copyObj = shallowReadonly(obj)

function change1(){
    // vscode 会提示：无法为“name”赋值，因为它是只读属性。ts
    copyObj.name = 'p2'
}

function change2(){
    copyObj.options.age = 19
}

</script>

通过 shallowReadonly 创建一个备份数据，点击第一个按钮没反应，点击第二个按钮，页面变成：

# 组件A

obj: { "name": "p", "options": { "age": 19 } }

shallowReadonly 只处理浅层次的只读。深层次的不管，也就是可以修改。

疑惑：笔者的开发者工具中， copyObj -> options 中的 age 属性没有表示能修改的铅笔图标。应该要有，这样就能保持和代码一致

原始数据

toRaw

toRaw() can return the original object from proxies created by reactive(), readonly(), shallowReactive() or shallowReadonly().

用于获取一个响应式对象的原始对象。修改原始对象，不会在触发视图。

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true

比如这个使用场景：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>obj: {{ obj }}</p>

    <p><button @click="handle1(toRaw(obj))">处理数据</button></p>
</template>

<script lang="ts" setup name="App">
import {reactive, toRaw} from 'vue'
let obj = reactive({
    name: 'p',
    age: 18,
})

// 不用担心修改了数据从而影响到使用 obj 的地方
function handle1(o: any){
    // 修改数据
    o.age += 1
    // o: {name: 'p', age: 19}
    console.log('o: ', o)

    // 例如发送请求
}

</script>

markRaw

Marks an object so that it will never be converted to a proxy. Returns the object itself.

标记一个对象，使其永远不会被转换为proxy。返回对象本身。

  • 有些值不应该是响应式的，例如一个复杂的第三方类实例，或者一个Vue组件对象。
import {reactive} from 'vue'
let o = {
    getAge() {
        console.log(18)
    }
}
// Proxy(Object) {getAge: ƒ}
let o2 = reactive(o)
  • 当使用不可变数据源呈现大型列表时，跳过代理转换可以提高性能。

请问输出什么：

import {reactive} from 'vue'
let o = {
    name: 'p',
    age: 18,
}
let o2 = reactive(o)

console.log(o);
console.log(o2);

答案是：

{name: 'p', age: 18}
Proxy(Object) {name: 'p', age: 18}

通过 reactive 会将数据转为响应式。

请看 markRaw 示例：

import {reactive, markRaw} from 'vue'
// 标记 o 不能被转成响应式
let o = markRaw({
    getAge() {
        console.log(18)
    }
})
let o2 = reactive(o)

// {__v_skip: true, getAge: ƒ}
console.log(o2);

比如中国的城市，数据是固定不变的，我不做成响应式的，别人也不许做成响应式的。我可以这么写：

// 中国就这些地方，不会变。我自己不做成响应式的，别人也不许做成响应式的
let citys = markRow([
    {name: '北京'},
    {name: '上海'},
    {name: '深圳'},
    ...
])

customRef

自定义 ref 可用于解决内置 ref 不能解决的问题。

ref 用于创建响应式数据，数据一变，视图也会立刻更新。比如要1秒后更新视图，这个 ref 办不到。

先用ref写个例子：input 输入字符，msg 立刻更新:

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>msg: {{ msg }}</p>
    <input v-model="msg"/>
</template>

<script lang="ts" setup name="App">
import {ref} from 'vue'

let msg = ref('')

</script>

现在要求：input输入字符后，等待1秒msg才更新。

我们可以用 customRef 解决这个问题。

实现如下：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>msg: {{ msg }}</p>
    <input v-model="msg"/>
</template>

<script lang="ts" setup name="App">
import {ref, customRef, } from 'vue'

let initValue = ''

// customRef 传入函数，里面又两个参数
let msg = customRef((track, trigger) => {
    return {
      get() {
        // 告诉 vue 这个数据很重要，要持续关注，数据一旦变化，更新视图
        track()
        return initValue
      },
      set(newValue) {
        setTimeout(() => {
            initValue = newValue
            // 告诉vue我更新数据了，你更新视图去吧
            trigger()
        }, 1000)
      }
    }
  })
</script>

customRef() 接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

track() 和 trigger() 缺一不可，需配合使用：

  • 缺少 track，即使通知vue 更新了数据，但不会更新视图
  • 缺少 trigger，track 则一直在等着数据变，快变，我要更新视图。但最终没人通知它数据变了

实际工作会将上述功能封装成一个 hooks。使用起来非常方便。就像这样：

// hooks/useMsg.ts
import { customRef, } from 'vue'

export function useMsg(value: string, delay = 1000) {

  // customRef 传入函数，里面又两个参数
  let msg = customRef((track, trigger) => {
    // 防抖
    let timeout: number
    return {
      get() {
        // 告诉 vue 这个数据很重要，要持续关注，数据一旦变化，更新视图
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          // 告诉vue我更新数据了，你更新视图去吧
          trigger()
        }, delay)
      }
    }
  })

  return msg
}

使用起来和 ref 一样方便。就像这样：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>msg: {{ msg }}</p>
    <input v-model="msg"/>
</template>

<script lang="ts" setup name="App">
import {useMsg} from '@/hooks/useMsg'

let msg = useMsg('hello', 1000)

</script>

Teleport

Teleport 中文“传送”

Teleport 将其插槽内容渲染到 DOM 中的另一个位置。

比如 box 内的内容现在在 box 元素中：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <div class="box">
        <p>我是组件A内的弹框</p>
    </div>
</template>

我可以利用 Teleport 新增组件将其移到body下面。

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p><button @click="handle1">change msg</button></p>
    <div class="box">
        <Teleport to="body">
            <p>{{ msg }}</p>
        </Teleport>
    </div>
</template>

<script lang="ts" setup name="App">
import {ref} from 'vue'
let msg = ref('我是组件A内的弹框')

function handle1(){
    msg.value += '~'
}
</script>

现在这段ui内容就移到了 body 下，并且数据链还是之前的，也就是 msg 仍受 button 控制。

Tip：to 必填，语法是选择器或实际元素

<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />

Suspense

suspense 官网说是一个实验性功能。用来在组件树中协调对异步依赖的处理。

我们首先在子组件中异步请求，请看示例：

<!-- Father.vue -->
<template>
    <p># 父亲</p>
    <hr>
    <ChildA/>
</template>

<script lang="ts" setup name="App">
import ChildA from '@/views/ChildA.vue'
</script>

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
</template>

<script lang="ts" setup name="App">
import axios from 'axios';
// https://api.uomg.com/ 免费的 API 接口服务
let {data} = await axios.get('https://api.uomg.com/api/rand.music?sort=热歌榜&format=json')
console.log('data: ', data);
</script>

Tip：我们现在用了 setup 语法糖，没有机会写 async，之所以能这么写，是因为底层帮我们做了。

浏览器查看，发现子组件没有渲染出来。控制台输出：

// main.ts:14 [Vue 警告]: 组件 <App>: setup 函数返回了一个 Promise，但在父组件树中未找到 <Suspense> 边界。带有异步 setup() 的组件必须嵌套在 <Suspense> 中才能被渲染。
main.ts:14 [Vue warn]: Component <App>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 

data: {code: 1, data: {…}}

vue 告诉我们需要使用 Suspense。

假如我们将 await 用 async 方法包裹，子组件能正常显示。

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>data: {{ data }}</p>
</template>

<script lang="ts" setup name="App">
import {ref} from 'vue'
import axios from 'axios';

let data = ref({})
async function  handle1(){
    // https://api.uomg.com/ 免费的 API 接口服务
    // 先安装：npm install axios
    let response = await axios.get('https://api.uomg.com/api/rand.music?sort=热歌榜&format=json')
    data.value = response.data
    console.log('data: ', data);

}
handle1()
</script>

继续讨论异步的 setup()的解决方案。在父组件中使用 Suspense 组件即可。请看代码：

<!-- Father.vue -->
<template>
    <p># 父亲</p>
    <hr>
    // <Suspense> 组件有两个插槽：#default 和 #fallback。两个插槽都只允许一个直接子节点。
    <Suspense>
        <template #fallback>
            Loading...
        </template>
        <ChildA/>
    </Suspense>
</template>

<script lang="ts" setup name="App">
import ChildA from '@/views/ChildA.vue'
</script>

子组件也稍微调整下：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <p>data: {{ data }}</p>
</template>

<script lang="ts" setup name="App">
import axios from 'axios';
// https://api.uomg.com/ 免费的 API 接口服务
let {data} = await axios.get('https://api.uomg.com/api/rand.music?sort=热歌榜&format=json')
console.log('data: ', data);
</script>

利用开发者工具将网速跳到 3G，再次刷新页面，发现先显示Loading...，然后在显示

# 组件A

data: { "code": 1, "data": { "name": "阿普的思念", "url": "http://music.163.com/song/media/outer/url?id=2096764279", "picurl": "http://p1.music.126.net/Js1IO7cwfEe6G6yNPyv5FQ==/109951169021986117.jpg", "artistsname": "诺米么Lodmemo" } }

注：数据是一次性出来的，不是先展示 {} 在展示 {...}。所以我们再看官网，就能理解下面这段内容：

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus>（组件有异步的 setup()）
   └─ <Content>
      ├─ <ActivityFeed> （异步组件）
      └─ <Stats>（异步组件）

在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。如果没有 <Suspense>，则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。

有了 <Suspense> 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。

Tip: 在 React 中可以使用 Suspense 组件和 React.lazy() 函数来实现组件的延迟加载。就像这样：

import React, {Suspense} from 'react'
// 有当 OtherComponent 被渲染时，才会动态加载 ‘./math’ 组件
const OtherComponent = React.lazy(() => import('./math'))

function TestCompoment(){
    return <div>
                <Suspense fallback={<div>loading</div>}>
                    <OtherComponent/>
                </Suspense>
        </div>
}

全局 api 转移到应用对象

在 Vue 3 中，一些全局 API 被转移到了应用对象（app）中。

app就是这个：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

这些 API 以前在 Vue 2 中是全局可用的，但在 Vue 3 中，出于更好的模块化和灵活性考虑，许多 API 被转移到了应用对象中。

app.component

对应 vue2 中 Vue.component，用于注册和获取全局组件。

例如定义一个组件：

<template>
    <p>我的Apple组件</p>
</template>

在 main.ts 中注册：

import Apple from '@/views/Apple.vue'
app.component('Apple', Apple)

现在在任何地方都能直接使用，例如在 ChildA.vue 中：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <Apple/>
</template>

<script lang="ts" setup name="App">

</script>

app.config

vue2 中有 Vue.prototype. 比如 Vue.prototype.x = 'hello'，在任意模板中 {{x}} 都会输出 hello

这里有 app.config。

比如在 main.ts 中增加：app.config.globalProperties.x = 'hello'，在任意组件中就可以获取：

<template>
    <p># 组件A</p>
    x: {{ x }}
    <Apple/>
</template>

但是 ts 会报错，因为找不到 x。

解决方法在官网中有提供。创建一个 ts：

// test.ts
// 官网：https://cn.vuejs.org/api/application.html#app-config-globalproperties
// 正常工作。
export {}

declare module 'vue' {
  interface ComponentCustomProperties {
    x: string,
  }
}

然后在 main.ts 中引入：

import '@/utils/test'
app.config.globalProperties.x = 'hello'

不要随便使用，否则你一下定义100个，以后出问题不好维护。

app.directive

Vue.directive() - 注册或获取全局指令。

我们用函数形式的指令，就像这样：

// https://v2.cn.vuejs.org/v2/guide/custom-directive.html#函数简写
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

比如我写一个这样的指令：

// main.ts 注册一个全局指令
app.directive('green', (element, {value}, vnode) => {
    element.innerText += value
    element.style.color = 'green'
})

接着使用指令：

<!-- ChildA.vue -->
<template>
    <p># 组件A</p>
    <h4 v-green="msg">你好</h4>
    <Apple/>
</template>

<script lang="ts" setup name="App">
import {ref} from 'vue'
let msg = ref('兄弟')
</script>

页面呈现：

# 组件A
// 绿色文字
你好兄弟

其他

app.mount - 挂载
app.unmount - 卸载
app.use - 安装插件。例如路由、pinia

非兼容性改变

非兼容性改变是Vue 2 迁移中的一章，列出了 Vue 2 对 Vue 3 的所有非兼容性改变

Tip：强烈建议详细阅读该篇。

全局 API 应用实例

Vue 2.x 有许多全局 API 和配置，它们可以全局改变 Vue 的行为。例如，要注册全局组件，可以使用 Vue.component API

虽然这种声明方式很方便，但它也会导致一些问题。从技术上讲，Vue 2 没有“app”的概念，我们定义的应用只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置

全局配置使得在同一页面上的多个“应用”在全局配置不同时共享同一个 Vue 副本非常困难

为了避免这些问题，在 Vue 3 中我们引入了...

一个新的全局 API：createApp

全局和内部 API 都经过了重构，现已支持 TreeShaking （摇树优化）

如果你曾经在 Vue 中手动操作过 DOM，你可能会用过这种方式：

import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和 DOM 有关的东西
})

但是，如果你从来都没有过手动操作 DOM 的必要，或者更喜欢使用老式的 window.setTimeout() 来代替它，那么 nextTick() 的代码就会变成死代码。

如 webpack 和 Rollup (Vite 基于它) 这样的模块打包工具支持 tree-shaking，遗憾的是，由于之前的 Vue 版本中的代码编写方式，如 Vue.nextTick() 这样的全局 API 是不支持 tree-shake 的，不管它们实际上是否被使用了，都会被包含在最终的打包产物中。

Tip：Vite 基于 Rollup

在 Vue 3 中，全局和内部 API 都经过了重构，并考虑到了 tree-shaking 的支持。因此，对于 ES 模块构建版本来说，全局 API 现在通过具名导出进行访问。例如，我们之前的代码片段现在应该如下所示：

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和 DOM 有关的东西
})

通过这一更改，如果模块打包工具支持 tree-shaking，则 Vue 应用中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小。

v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync

  • 非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
    • prop：value -> modelValue；
    • 事件：input -> update:modelValue；
  • 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；
  • 新增：现在可以在同一个组件上使用多个 v-model 绑定；
  • 新增：现在可以自定义 v-model 修饰符。

sync 和 model 选项已废除

在<template v-for> 和没有 v-for 的节点身上使用 key 发生了变化

  • 新增：对于 v-if/v-else/v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。
  • 非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你将不再能通过故意使用相同的 key 来强制重用分支。
  • 非兼容：<template v-for> 的 key 应该设置在 <template> 标签上 (而不是设置在它的子节点上)。

v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化

  • 非兼容：两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级。

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。

3.x 版本中 v-if 总是优先于 v-for 生效。

v-bind="object" 现在是顺序敏感的

  • 不兼容：v-bind 的绑定顺序会影响渲染结果。

在 2.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>

在 3.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么绑定的声明顺序将决定它们如何被合并

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="blue"></div>

<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>

移除 v-on.native 修饰符

v-on 的 .native 修饰符已被移除。

2.x 语法: 默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

3.x 语法: 对于子组件中未被定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中。强烈建议使用 emits 记录每个组件所触发的所有事件。

函数式组件只能通过纯函数进行创建

概览

对变化的总体概述：

  • 2.x 中函数式组件带来的性能提升在 3.x 中已经可以忽略不计，因此我们建议只使用有状态的组件
  • 函数式组件只能由接收 props 和 context (即：slots、attrs、emit) 的普通函数创建
  • 非兼容：functional attribute 已从单文件组件 (SFC) 的 <template> 中移除
  • 非兼容：{ functional: true } 选项已从通过函数创建的组件中移除
介绍

在 Vue 2 中，函数式组件主要有两个应用场景：

  • 作为性能优化，因为它们的初始化速度比有状态组件快得多
  • 返回多个根节点

然而，在 Vue 3 中，有状态组件的性能已经提高到它们之间的区别可以忽略不计的程度。此外，有状态组件现在也支持返回多个根节点。

因此，函数式组件剩下的唯一应用场景就是简单组件，比如创建动态标题的组件。否则，建议你像平常一样使用有状态组件。

异步组件现在需要通过 defineAsyncComponent 方法进行创建

异步组件的主要作用是延迟组件的加载，只有在组件需要被渲染时才会进行加载和实例化，而不是在页面加载时就加载所有的组件

概览

以下是对变化的总体概述：

  • 新的 defineAsyncComponent 助手方法，用于显式地定义异步组件
  • component 选项被重命名为 loader
  • Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise
介绍

以前，异步组件是通过将组件定义为返回 Promise 的函数来创建的，例如：

const asyncModal = () => import('./Modal.vue')

或

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

现在，在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义：

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// 不带选项的异步组件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// 带选项的异步组件
const asyncModalWithOptions = defineAsyncComponent({
  // component 重命名为 loader
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

与 2.x 不同，loader 函数不再接收 resolve 和 reject 参数，且必须始终返回 Promise。

// 2.x 版本
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

// 3.x 版本
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)

组件事件现在应该使用 emits 选项进行声明

Vue 3 现在提供一个 emits 选项（也就是上文的 defineEmits），和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。

行为

在 Vue 2 中，你可以定义一个组件可接收的 prop，但是你无法声明它可以触发哪些事件：

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>

在 vue 3.x 中，和 prop 类似，现在可以通过 emits 选项来定义组件可触发的事件：

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>
迁移策略

强烈建议使用 emits 记录每个组件所触发的所有事件。

这尤为重要，因为我们移除了 .native 修饰符。任何未在 emits 中声明的事件监听器都会被算入组件的 $attrs，并将默认绑定到组件的根节点上。

渲染函数

渲染函数 API 更改

此更改不会影响 <template> 用户。

以下是更改的简要总结：

  • h 现在是全局导入，而不是作为参数传递给渲染函数
  • 更改渲染函数参数，使其在有状态组件和函数组件的表现更加一致
  • VNode 现在有一个扁平的 prop 结构
$listeners 被移除或整合到 $attrs
$attrs 现在包含 class 和 style attribute

其他小改变

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
Props 的 default 工厂函数不再可以访问 this 上下文
自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
data 选项应始终被声明为一个函数

在 2.x 中，开发者可以通过 object 或者是 function 定义 data 选项。

<!-- Object 声明 -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- Function 声明 -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>

在 3.x 中，data 选项已标准化为只接受返回 object 的 function。

此外，当来自组件的 data() 及其 mixin 或 extends 基类被合并时，合并操作现在将被浅层次地执行：

Tip：mixin 的深度合并非常隐式，这让代码逻辑更难理解和调试。

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

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

在 Vue 2.x 中，生成的 $data 是：

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

在 3.0 中，其结果将会是：

{
  "user": {
    "id": 2
  }
}
来自 mixin 的 data 选项现在为浅合并
Attribute 强制策略已更改

这是一个底层的内部 API 更改，绝大多数开发人员不会受到影响。

Transition 的一些 class 被重命名

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。

<TransitionGroup> 不再默认渲染包裹元素

<transition-group> 不再默认渲染根元素，但仍然可以用 tag attribute 创建根元素。

当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项

非兼容: 当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组被改变时触发回调，必须指定 deep 选项。

没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将渲染为原生的 <template> 元素，而不是渲染其内部内容。

这种变化主要是为了更好地与 Web 标准保持一致，并提高 Vue 在静态分析和工具支持方面的表现。虽然在 Vue 2 中，没有用于 Vue 指令的 <template> 会被视为特殊的 Vue 模板标记，但在 Vue 3 中，它们被认为是普通的 HTML 元素。

已挂载的应用不会替换它所挂载的元素

在 Vue 2.x 中，当挂载一个具有 template 的应用时，被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中，被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML。

生命周期的 hook: 事件前缀改为 vue:

被移除的 API

keyCode 作为 v-on 修饰符的支持
  • 非兼容：不再支持使用数字 (即键码) 作为 v-on 修饰符
  • 非兼容：不再支持 config.keyCodes
$on、$off 和 $once 实例方法

$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口。

vue2 中用于实现事件总线的可以用外部的库替代，例如 mitt。

在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。根据具体情况来看，有多种事件总线的替代方案

过滤器 (filter)

在 3.x 中，过滤器已移除，且不再支持。取而代之的是，我们建议用方法调用或计算属性来替换它们。

$children 实例 property

$children 实例 property 已从 Vue 3.0 中移除，不再支持。如果你需要访问子组件实例，我们建议使用模板引用（即 ref）。

propsData 选项

propsData 选项已经被移除。如果你需要在实例创建时向根组件传入 prop，你应该使用 createApp 的第二个参数

$destroy 实例方法。用户不应该再手动管理单个 Vue 组件的生命周期。

完全销毁一个实例。

vue2：在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。

其他章节请看：

vue3 快速入门 系列

posted @ 2024-04-22 10:24  彭加李  阅读(617)  评论(0)  编辑  收藏  举报