今天介紹前面幾天一直在文中默默出現的 setup 方法

This

當 setup 被 Vue 執行時，元件還沒有被 new 出來，所以在 setup 方法裡不能使用 this ，所以像是 data, computed, methods 裡的屬性或方法都無法在 setup 中使用。

參數

setup 方法只有兩個參數

• props
• context

Props

這個 props 跟之前 Vue2 的 props 意義上是相同的，但 setup 執行時還沒有 this，所以作為參數傳給了 setup 方法。

props 是響應式的，所以元件會隨著 props 更新而更新。

特別注意到，如果對 props 使用解構賦值會導致響應失效，若有該需求，請記得使用 toRefs 將 props 包起來，如下：

import { toRefs } from 'vue'

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

	return { name }
}

Context

setup 的第 2 個參數是 context 物件，這個物件有3個屬性：

• attrs
• slots
• emit

attrs 和 slots 會持續地隨著元件更新而更新狀態，然而 attrs 和 slots 都不是響應式物件，如果想要在其變更時更新元件，可以配合 onUpdate lifecycle hook。

也因為 context 中的 3 個屬性都不是響應式物件，因此可以放心使用物件解構的方式調用他們：

export default {
  setup(props, { attrs, slots, emit }) {
    
    emit('update:foo', 'bar')
  }
}

SFC

在 SFC (Single File Component) 中使用 setup 方法時，setup 所回傳的 refs 物件，會自動 unwrapped，所以在 template 使用響應式物件時，不用寫 .value，如下：

<template>
  <div>{{ book }}</div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup() {
      const book = ref('Vue 3 Guide')

      return {
        book
      }
    }
  }
</script>

Render Function

setup 可以回傳一個 render function，參考以下範例：

import { h, ref } from 'vue'

export default {
  setup() {
    const book = ref('Vue 3 Guide')

    // 注意，回傳 render function 的話，setup 不會幫你 unwrap refs，所以要寫上 .value
    return () => h('div', [book.value])
  }
}