Vue 3.0 組合式API Setup

本節(jié)使用單文件組件代碼示例的語(yǔ)法

本指南假定你已經(jīng)閱讀了組合式 API 簡(jiǎn)介和響應(yīng)性原理。如果你不熟悉組合式 API，請(qǐng)先閱讀這篇文章。

#參數(shù)

使用 setup 函數(shù)時(shí)，它將接受兩個(gè)參數(shù)：

1. props
2. context

讓我們更深入地研究如何使用每個(gè)參數(shù)。

#Props

setup 函數(shù)中的第一個(gè)參數(shù)是 props。正如在一個(gè)標(biāo)準(zhǔn)組件中所期望的那樣，setup 函數(shù)中的 props 是響應(yīng)式的，當(dāng)傳入新的 prop 時(shí)，它將被更新。

// MyBook.vue
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

WARNING

但是，因?yàn)?props 是響應(yīng)式的，你不能使用 ES6 解構(gòu)，因?yàn)樗鼤?huì)消除 prop 的響應(yīng)性。

如果需要解構(gòu) prop，可以通過(guò)使用 setup 函數(shù)中的 toRefs 來(lái)安全地完成此操作。

// MyBook.vue
import { toRefs } from 'vue'
setup(props) {
    const { title } = toRefs(props)
    console.log(title.value)
}

#上下文

傳遞給 setup 函數(shù)的第二個(gè)參數(shù)是 context。context 是一個(gè)普通的 JavaScript 對(duì)象，它暴露三個(gè)組件的 property：

// MyBook.vue
export default {
  setup(props, context) {
    // Attribute (非響應(yīng)式對(duì)象)
    console.log(context.attrs)
    // 插槽 (非響應(yīng)式對(duì)象)
    console.log(context.slots)
    // 觸發(fā)事件 (方法)
    console.log(context.emit)
  }
}

context 是一個(gè)普通的 JavaScript 對(duì)象，也就是說(shuō)，它不是響應(yīng)式的，這意味著你可以安全地對(duì) context 使用 ES6 解構(gòu)。

// MyBook.vue
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

attrs 和 slots 是有狀態(tài)的對(duì)象，它們總是會(huì)隨組件本身的更新而更新。這意味著你應(yīng)該避免對(duì)它們進(jìn)行解構(gòu)，并始終以 attrs.x 或 slots.x 的方式引用 property。請(qǐng)注意，與 props 不同，attrs 和 slots 是非響應(yīng)式的。如果你打算根據(jù) attrs 或 slots 更改應(yīng)用副作用，那么應(yīng)該在 onUpdated 生命周期鉤子中執(zhí)行此操作。

#訪問(wèn)組件的 property

執(zhí)行 setup 時(shí)，組件實(shí)例尚未被創(chuàng)建。因此，你只能訪問(wèn)以下 property：

• props
• attrs
• slots
• emit

換句話說(shuō)，你將無(wú)法訪問(wèn)以下組件選項(xiàng)：

• data
• computed
• methods

#結(jié)合模板使用

如果 setup 返回一個(gè)對(duì)象，則可以在組件的模板中像傳遞給 setup 的 props property 一樣訪問(wèn)該對(duì)象的 property：

<!-- MyBook.vue -->
<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>
<script>
  import { ref, reactive } from 'vue'
  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })
      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

注意，從 setup 返回的 refs 在模板中訪問(wèn)時(shí)是被自動(dòng)解開(kāi)的，因此不應(yīng)在模板中使用 .value。

#使用渲染函數(shù)

setup 還可以返回一個(gè)渲染函數(shù)，該函數(shù)可以直接使用在同一作用域中聲明的響應(yīng)式狀態(tài)：

// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

#使用 this

在 setup() 內(nèi)部，this 不會(huì)是該活躍實(shí)例的引用，因?yàn)?setup() 是在解析其它組件選項(xiàng)之前被調(diào)用的，所以 setup() 內(nèi)部的 this 的行為與其它選項(xiàng)中的 this 完全不同。這在和其它選項(xiàng)式 API 一起使用 setup() 時(shí)可能會(huì)導(dǎo)致混淆。