Vue 3.0 組合式API Setup

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

本指南假定你已經閱讀了組合式 API 簡介和響應性原理。如果你不熟悉組合式 API，請先閱讀這篇文章。

#參數(shù)

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

1. props
2. context

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

#Props

setup 函數(shù)中的第一個參數(shù)是 props。正如在一個標準組件中所期望的那樣，setup 函數(shù)中的 props 是響應式的，當傳入新的 prop 時，它將被更新。

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

WARNING

但是，因為 props 是響應式的，你不能使用 ES6 解構，因為它會消除 prop 的響應性。

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

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

#上下文

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

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

context 是一個普通的 JavaScript 對象，也就是說，它不是響應式的，這意味著你可以安全地對 context 使用 ES6 解構。

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

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

#訪問組件的 property

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

• props
• attrs
• slots
• emit

換句話說，你將無法訪問以下組件選項：

• data
• computed
• methods

#結合模板使用

如果 setup 返回一個對象，則可以在組件的模板中像傳遞給 setup 的 props property 一樣訪問該對象的 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 在模板中訪問時是被自動解開的，因此不應在模板中使用 .value。

#使用渲染函數(shù)

setup 還可以返回一個渲染函數(shù)，該函數(shù)可以直接使用在同一作用域中聲明的響應式狀態(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() 內部，this 不會是該活躍實例的引用，因為 setup() 是在解析其它組件選項之前被調用的，所以 setup() 內部的 this 的行為與其它選項中的 this 完全不同。這在和其它選項式 API 一起使用 setup() 時可能會導致混淆。