vue3 - 可復用 & 組合 - 組合式API - Setup

總結

• setup
  • 第一個參數 props 是響應式的
    • 因為 props 是響應式的，你不能使用 ES6 解構，因為它會消除 prop 的響應性。
    • 解構等價於const a = props.a這將導致 a 本身不具備響應，但 a 指向的引用對象還是具備響應的
    • props 是響應的，但不需要通過 .value 訪問，因為它是一個對象
  • 傳遞給 setup 函數的第二個參數是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property
    • attrs 和 slots 是有狀態的對象，它們總是會隨組件本身的更新而更新（onUpdated）。這意味着你應該避免對它們進行解構
    • vue 2 中 $attrs 內的屬性是不響應的，但是它本身是響應的，所以當改變了某個 attr 后會觸發 $attrs 的 set 從而觸發響應。
    • vue 2 中子組件的 render 會導致父組件的 render，當前組件的 $slots 指向的 vnode 改變，即當前子組件 render 了。
    • vue 3 中強調 context 是普通對象，即 attrs 不是響應屬性，那所謂的狀態對象是如何嵌入響應機制的呢？
  • 如果 setup 返回一個對象，則可以在組件的模板中像傳遞給 setup 的 props property 一樣訪問該對象的 property
    • 從 setup 返回的 refs 在模板中訪問時是被自動解開的，因此不應在模板中使用 .value
    • setup 還可以返回一個渲染函數，該函數可以直接使用在同一作用域中聲明的響應式狀態
  • 執行 setup 時，組件實例尚未被創建，無法訪問data、computed、methods， 內部的 this 的行為與其它選項中的 this 完全不同。
    • 因為 setup 是圍繞 beforeCreate 和 created 生命周期鈎子運行的，所以不需要顯式地定義它們。換句話說，在這些鈎子中編寫的任何代碼都應該直接在 setup 函數中編寫。

export default {
  setup(props, context) {
    // Attribute (非響應式對象)
    console.log(context.attrs)

    // 插槽 (非響應式對象)
    console.log(context.slots)

    // 觸發事件 (方法)
    console.log(context.emit)
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })  
    return {
      readersNumber,
      book
    }
    // 或者
    return () => h('div', [readersNumber.value])
  }
}

• 使用 toRefs 解構響應對象
  • 對象本身是不能被創造為響應的，只能響應它的屬性，所以解構的對象實際被賦值給了 value

import { toRefs } from 'vue'

setup(props) {
	const { title } = toRefs(props)
	console.log(title.value)
}

• 從一個響應對象中獲取屬性創建新的響應對象，包括 undefined

import { toRef } from 'vue'
setup(props) {
	const title = toRef(props, 'title')
	console.log(title.value)
}

原文地址 v3.cn.vuejs.org

# 參數

使用 setup 函數時，它將接受兩個參數：

1. props
2. context

# Props

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

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

WARNING

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

如果需要解構 prop，可以通過使用 setup 函數中的 toRefs 來完成此操作：

import { toRefs } from 'vue'

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)
}

如果 title 是可選的 prop，則傳入的 props 中可能沒有 title 。在這種情況下，toRefs 將不會為 title 創建一個 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
	const title = toRef(props, 'title')
	console.log(title.value)
}

# Context

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

export default {
  setup(props, context) {
    // Attribute (非響應式對象)
    console.log(context.attrs)

    // 插槽 (非響應式對象)
    console.log(context.slots)

    // 觸發事件 (方法)
    console.log(context.emit)
  }
}

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

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

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

# 訪問組件的 property

執行 setup 時，組件實例尚未被創建。因此，你只能訪問以下 property：

• props
• attrs
• slots
• emit

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

• data
• computed
• methods

# 結合模板使用

如果 setup 返回一個對象，則可以在組件的模板中像傳遞給 setup 的 props property 一樣訪問該對象的 property：

<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' })

      
      return {
        readersNumber,
        book
      }
    }
  }
</script>

注意，從 setup 返回的 refs 在模板中訪問時是被自動解開的，因此不應在模板中使用 .value。

# 使用渲染函數

setup 還可以返回一個渲染函數，該函數可以直接使用在同一作用域中聲明的響應式狀態：

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    
    return () => h('div', [readersNumber.value, book.title])
  }
}

# 使用 this

在 setup() 內部，this 不會是該活躍實例的引用，因為 setup() 是在解析其它組件選項之前被調用的，所以 setup() 內部的 this 的行為與其它選項中的 this 完全不同。這在和其它選項式 API 一起使用 setup() 時可能會導致混淆。