vue3.x 新特性 - CompositionAPI

0. 基礎要求

了解常見的 ES6 新特性

1. ES6 的導入導出語法
2. 解構賦值
3. 箭頭函數
4. etc...

了解 vue 2.x 的基本使用

1. 組件
2. 常用的指令
3. 生命周期函數
4. computed、watch、ref 等

 

1. 相關資源

【知乎 - vue Function-based API RFC】https://zhuanlan.zhihu.com/p/68477600

【github - vuejs/composition-api】https://github.com/vuejs/composition-api

【github - composition-api/CHANGELOG.md】https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md

【開源中國 - 尤雨溪公布 Vue 3.0 開發路線：將從頭開始重寫 3.0】https://www.oschina.net/news/100515/plans-for-the-next-iteration-of-vue-js

 

2. 初始化項目

安裝 vue-cli3

npm install -g @vue/cli # OR yarn global add @vue/cli

創建項目

vue create my-project # OR vue ui

在項目中安裝 composition-api 體驗 vue3 新特性

npm install @vue/composition-api --save # OR yarn add @vue/composition-api

在使用任何 @vue/composition-api 提供的能力前，必須先通過 Vue.use() 進行安裝

import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi)

安裝插件后，您就可以使用新的 Composition API 來開發組件了。

 

3. setup

setup() 函數是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的 Composition API 新特性提供了統一的入口。

3.1 執行時機

setup 函數會在 beforeCreate 之后、created 之前執行

3.2 接收 props 數據

在 props 中定義當前組件允許外界傳遞過來的參數名稱：

props: {
    p1: String }

通過 setup 函數的第一個形參，接收 props 數據：

setup(props) {
    console.log(props.p1) }

3.3 context

setup 函數的第二個形參是一個上下文對象，這個上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中需要通過 this 才能訪問到，在 vue 3.x 中，它們的訪問方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent context.root context.emit context.refs } }

注意：在 setup() 函數中無法訪問到 this  

 

4. reactive

reactive() 函數接收一個普通對象，返回一個響應式的數據對象。

4.1 基本語法

等價於 vue 2.x 中的 Vue.observable() 函數，vue 3.x 中提供了 reactive() 函數，用來創建響應式的數據對象，基本代碼示例如下：

import { reactive } from '@vue/composition-api' // 創建響應式數據對象，得到的 state 類似於 vue 2.x 中 data() 返回的響應式對象 const state = reactive({ count: 0 })

4.2 定義響應式數據供 template 使用

按需導入 reactive 函數：

import { reactive } from '@vue/composition-api'

在 setup() 函數中調用 reactive() 函數，創建響應式數據對象：

setup() {
     // 創建響應式數據對象 const state = reactive({count: 0}) // setup 函數中將響應式數據對象 return 出去，供 template 使用 return state }

在 template 中訪問響應式數據：

<p>當前的 count 值為：{{count}}</p>

 

5. ref

5.1 基本語法

ref() 函數用來根據給定的值創建一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 .value 屬性：

import { ref } from '@vue/composition-api' // 創建響應式數據對象 count，初始值為 0 const count = ref(0) // 如果要訪問 ref() 創建出來的響應式數據對象的值，必須通過 .value 屬性才可以 console.log(count.value) // 輸出 0 // 讓 count 的值 +1 count.value++ // 再次打印 count 的值 console.log(count.value) // 輸出 1

5.2 在 template 中訪問 ref 創建的響應式數據

在 setup() 中創建響應式數據：

import { ref } from '@vue/composition-api' setup() { const count = ref(0) return { count, name: ref('zs') } }

在 template 中訪問響應式數據：

<template> <p>{{count}} --- {{name}}</p> </template>

5.3 在 reactive 對象中訪問 ref 創建的響應式數據

當把 ref() 創建出來的響應式數據對象，掛載到 reactive() 上時，會自動把響應式數據對象展開為原始的值，不需通過 .value 就可以直接被訪問，例如：

const count = ref(0) const state = reactive({ count }) console.log(state.count) // 輸出 0 state.count++ // 此處不需要通過 .value 就能直接訪問原始值 console.log(count) // 輸出 1

注意：新的 ref 會覆蓋舊的 ref，示例代碼如下：

// 創建 ref 並掛載到 reactive 中 const c1 = ref(0) const state = reactive({ c1 }) // 再次創建 ref，命名為 c2 const c2 = ref(9) // 將 舊 ref c1 替換為 新 ref c2 state.c1 = c2 state.c1++ console.log(state.c1) // 輸出 10 console.log(c2.value) // 輸出 10 console.log(c1.value) // 輸出 0

 

6. isRef

isRef() 用來判斷某個值是否為 ref() 創建出來的對象；應用場景：當需要展開某個可能為 ref() 創建出來的值的時候，例如：

import { isRef } from '@vue/composition-api' const unwrapped = isRef(foo) ? foo.value : foo

 

7. toRefs

toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，只不過，這個對象上的每個屬性節點，都是 ref() 類型的響應式數據，最常見的應用場景如下：

import { toRefs } from '@vue/composition-api' setup() { // 定義響應式數據對象 const state = reactive({ count: 0 }) // 定義頁面上可用的事件處理函數 const increment = () => { state.count++ } // 在 setup 中返回一個對象供頁面使用 // 這個對象中可以包含響應式的數據，也可以包含事件處理函數 return { // 將 state 上的每個屬性，都轉化為 ref 形式的響應式數據 ...toRefs(state), // 自增的事件處理函數 increment } }

頁面上可以直接訪問 setup() 中 return 出來的響應式數據：

<template> <div> <p>當前的count值為：{{count}}</p> <button @click="increment">+1</button> </div> </template>

 

8. computed

computed() 用來創建計算屬性，computed() 函數的返回值是一個 ref 的實例。使用 computed 之前需要按需導入：

import { computed } from '@vue/composition-api'

8.1 創建只讀的計算屬性

在調用 computed() 函數期間，傳入一個 function 函數，可以得到一個只讀的計算屬性，示例代碼如下：

// 創建一個 ref 響應式數據 const count = ref(1) // 根據 count 的值，創建一個響應式的計算屬性 plusOne // 它會根據依賴的 ref 自動計算並返回一個新的 ref const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 輸出 2 plusOne.value++ // error

8.2 創建可讀可寫的計算屬性

在調用 computed() 函數期間，傳入一個包含 get 和 set 函數的對象，可以得到一個可讀可寫的計算屬性，示例代碼如下：

// 創建一個 ref 響應式數據 const count = ref(1) // 創建一個 computed 計算屬性 const plusOne = computed({ // 取值函數 get: () => count.value + 1, // 賦值函數 set: val => { count.value = val - 1 } }) // 為計算屬性賦值的操作，會觸發 set 函數 plusOne.value = 9 // 觸發 set 函數后，count 的值會被更新 console.log(count.value) // 輸出 8

 

9. watch

watch() 函數用來監視某些數據項的變化，從而觸發某些特定的操作，使用之前需要按需導入：

import { watch } from '@vue/composition-api'

9.1 基本用法

const count = ref(0) // 定義 watch，只要 count 值變化，就會觸發 watch 回調 // watch 會在創建時會自動調用一次 watch(() => console.log(count.value)) // 輸出 0 setTimeout(() => { count.value++ // 輸出 1 }, 1000)

9.2 監視指定的數據源

監視 reactive 類型的數據源：

// 定義數據源 const state = reactive({ count: 0 }) // 監視 state.count 這個數據節點的變化 watch(() => state.count, (count, prevCount) => { /* ... */ })

監視 ref 類型的數據源：

// 定義數據源 const count = ref(0) // 指定要監視的數據源 watch(count, (count, prevCount) => { /* ... */ })

9.3 監視多個數據源

監視 reactive 類型的數據源：

const state = reactive({ count: 0, name: 'zs' }) watch( [() => state.count, () => state.name], // Object.values(toRefs(state)), ([count, name], [prevCount, prevName]) => { console.log(count) // 新的 count 值 console.log(name) // 新的 name 值 console.log('------------') console.log(prevCount) // 舊的 count 值 console.log(prevName) // 新的 name 值 }, { lazy: true // 在 watch 被創建的時候，不執行回調函數中的代碼 } ) setTimeout(() => { state.count++ state.name = 'ls' }, 1000)

監視 ref 類型的數據源：

const count = ref(0) const name = ref('zs') watch( [count, name], // 需要被監視的多個 ref 數據源 ([count, name], [prevCount, prevName]) => { console.log(count) console.log(name) console.log('-------------') console.log(prevCount) console.log(prevName) }, { lazy: true } ) setTimeout(() => { count.value++ name.value = 'xiaomaolv' }, 1000)

9.4 清除監視

在 setup() 函數內創建的 watch 監視，會在當前組件被銷毀的時候自動停止。如果想要明確地停止某個監視，可以調用 watch() 函數的返回值即可，語法如下：

// 創建監視，並得到 停止函數 const stop = watch(() => { /* ... */ }) // 調用停止函數，清除對應的監視 stop()

9.5 在 watch 中清除無效的異步任務

有時候，當被 watch 監視的值發生變化時，或 watch 本身被 stop 之后，我們期望能夠清除那些無效的異步任務，此時，watch 回調函數中提供了一個 cleanup registrator function 來執行清除的工作。這個清除函數會在如下情況下被調用：

• watch 被重復執行了
• watch 被強制 stop 了

Template 中的代碼示例如下：

/* template 中的代碼 */ <input type="text" v-model="keywords" />

Script 中的代碼示例如下：

// 定義響應式數據 keywords const keywords = ref('') // 異步任務：打印用戶輸入的關鍵詞 const asyncPrint = val => { // 延時 1 秒后打印 return setTimeout(() => { console.log(val) }, 1000) } // 定義 watch 監聽 watch( keywords, (keywords, prevKeywords, onCleanup) => { // 執行異步任務，並得到關閉異步任務的 timerId const timerId = asyncPrint(keywords) // 如果 watch 監聽被重復執行了，則會先清除上次未完成的異步任務 onCleanup(() => clearTimeout(timerId)) }, // watch 剛被創建的時候不執行 { lazy: true } ) // 把 template 中需要的數據 return 出去 return { keywords }

 

10. LifeCycle Hooks

新版的生命周期函數，可以按需導入到組件中，且只能在 setup() 函數中使用，代碼示例如下：

import { onMounted, onUpdated, onUnmounted } from '@vue/composition-api' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) } }

下面的列表，是 vue 2.x 的生命周期函數與新版 Composition API 之間的映射關系：

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

 

11. provide & inject

provide() 和 inject() 可以實現嵌套組件之間的數據傳遞。這兩個函數只能在 setup() 函數中使用。父級組件中使用 provide() 函數向下傳遞數據；子級組件中使用 inject() 獲取上層傳遞過來的數據。

11.1 共享普通數據

App.vue 根組件：

<template> <div id="app"> <h1>App 根組件</h1> <hr /> <LevelOne /> </div> </template> <script> import LevelOne from './components/LevelOne' // 1. 按需導入 provide import { provide } from '@vue/composition-api' export default { name: 'app', setup() { // 2. App 根組件作為父級組件，通過 provide 函數向子級組件共享數據（不限層級） // provide('要共享的數據名稱', 被共享的數據) provide('globalColor', 'red') }, components: { LevelOne } } </script>

LevelOne.vue 組件：

<template> <div> <!-- 4. 通過屬性綁定，為標簽設置字體顏色 --> <h3 :style="{color: themeColor}">Level One</h3> <hr /> <LevelTwo /> </div> </template> <script> import LevelTwo from './LevelTwo' // 1. 按需導入 inject import { inject } from '@vue/composition-api' export default { setup() { // 2. 調用 inject 函數時，通過指定的數據名稱，獲取到父級共享的數據 const themeColor = inject('globalColor') // 3. 把接收到的共享數據 return 給 Template 使用 return { themeColor } }, components: { LevelTwo } } </script>

LevelTwo.vue 組件：

<template> <div> <!-- 4. 通過屬性綁定，為標簽設置字體顏色 --> <h5 :style="{color: themeColor}">Level Two</h5> </div> </template> <script> // 1. 按需導入 inject import { inject } from '@vue/composition-api' export default { setup() { // 2. 調用 inject 函數時，通過指定的數據名稱，獲取到父級共享的數據 const themeColor = inject('globalColor') // 3. 把接收到的共享數據 return 給 Template 使用 return { themeColor } } } </script>

11.2 共享 ref 響應式數據

如下代碼實現了點按鈕切換主題顏色的功能，主要修改了 App.vue 組件中的代碼，LevelOne.vue 和 LevelTwo.vue 中的代碼不受任何改變：

<template> <div id="app"> <h1>App 根組件</h1> <!-- 點擊 App.vue 中的按鈕，切換子組件中文字的顏色 --> <button @click="themeColor='red'">紅色</button> <button @click="themeColor='blue'">藍色</button> <button @click="themeColor='orange'">橘黃色</button> <hr /> <LevelOne /> </div> </template> <script> import LevelOne from './components/LevelOne' import { provide, ref } from '@vue/composition-api' export default { name: 'app', setup() { // 定義 ref 響應式數據 const themeColor = ref('red') // 把 ref 數據通過 provide 提供的子組件使用 provide('globalColor', themeColor) // setup 中 return 數據供當前組件的 Template 使用 return { themeColor } }, components: { LevelOne } } </script>

廣州品牌設計公司https://www.houdianzi.com

12. template refs

通過 ref() 還可以引用頁面上的元素或組件。

12.1 元素的引用

示例代碼如下：

<template> <div> <h3 ref="h3Ref">TemplateRefOne</h3> </div> </template> <script> import { ref, onMounted } from '@vue/composition-api' export default { setup() { // 創建一個 DOM 引用 const h3Ref = ref(null) // 在 DOM 首次加載完畢之后，才能獲取到元素的引用 onMounted(() => { // 為 dom 元素設置字體顏色 // h3Ref.value 是原生DOM對象 h3Ref.value.style.color = 'red' }) // 把創建的引用 return 出去 return { h3Ref } } } </script>

12.2 組件的引用

TemplateRefOne.vue 中的示例代碼如下：

<template> <div> <h3>TemplateRefOne</h3> <!-- 4. 點擊按鈕展示子組件的 count 值 --> <button @click="showNumber">獲取TemplateRefTwo中的count值</button> <hr /> <!-- 3. 為組件添加 ref 引用 --> <TemplateRefTwo ref="comRef" /> </div> </template> <script> import { ref } from '@vue/composition-api' import TemplateRefTwo from './TemplateRefTwo' export default { setup() { // 1. 創建一個組件的 ref 引用 const comRef = ref(null) // 5. 展示子組件中 count 的值 const showNumber = () => { console.log(comRef.value.count) } // 2. 把創建的引用 return 出去 return { comRef, showNumber } }, components: { TemplateRefTwo } } </script>

TemplateRefTwo.vue 中的示例代碼：

<template> <div> <h5>TemplateRefTwo --- {{count}}</h5> <!-- 3. 點擊按鈕，讓 count 值自增 +1 --> <button @click="count+=1">+1</button> </div> </template> <script> import { ref } from '@vue/composition-api' export default { setup() { // 1. 定義響應式的數據 const count = ref(0) // 2. 把響應式數據 return 給 Template 使用 return { count } } } </script>

 

13. createComponent

這個函數不是必須的，除非你想要完美結合 TypeScript 提供的類型推斷來進行項目的開發。  

這個函數僅僅提供了類型推斷，方便在結合 TypeScript 書寫代碼時，能為 setup() 中的 props 提供完整的類型推斷。

import { createComponent } from 'vue' export default createComponent({ props: { foo: String }, setup(props) { props.foo // <- type: string } })