vue3中的Setup介绍(译)（vue3.0的setup()函数）

编程文章jaq1232025-05-04 14:37:2211A⁺A^-

vue3学习了也有一段时间了，从实战的角度看，粗浅的理解，vue3变化主要体现在setup上了，为了更加全面的理解setup，我特意找了官方对setup介绍，翻译出来以做参考。

原文链接：
https://v3.vuejs.org/guide/composition-api-setup.html#setup

前言

官方有两条提醒：

1、本章节使用单页面组件语法来编写相关示例。

2、本指引假设你已经读过组件的API指引（Compostion API Introduction）和响应式原理（Reactivity Fundamentals），如果你是初学者，建议先阅读组件API指引部分。

参数

当你使用setup函数时，可能需要传入两个参数（实际上两个参数非必填）：

props
context

下面让我们深入分析每个参数可以如何使用。

Props

setup接受的第一个参数，正如你在一个标准组件中所期待的那样，props在setup函数内部是响应式的，当你传入新的props时它会更新。

这里的props其实就是在组件中声明的props对象。

// MyBook.vue

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

注意：因为props是响应式的，你不能使用ES6中的解构赋值语法，那会移除props的响应式特性。

如果你确实需要解构你的props，你可以使用内置的toRefs工具函数，像下面这样：

// MyBook.vue

import { toRefs } from 'vue'

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

	console.log(title.value)
}

如果 title 在props中是一个可选值（非必填项），在这种情况下，toRefs函数不会为 title 创建一个ref对象，你需要使用toRef函数替代：

// MyBook.vue

import { toRef } from 'vue'

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

context

setup中传入的第二个参数是 context，context是一个javascript中的常规对象，这个对象中暴露出三个组件属性：

// MyBook.vue

export default {
  setup(props, context) {
    // Attributes (Non-reactive object)
    console.log(context.attrs)

    // Slots (Non-reactive object)
    console.log(context.slots)

    // Emit Events (Method)
    console.log(context.emit)
  }
}

因为context是一个JavaScript对象，所以它不是响应式的，这意味着你可以安全的使用ES6中的解构赋值语法：

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

attrs 和 slots 是有状态的，它们总是会随着组件自身的更新而更新，这意味着你应该避免解构它们，永远使用 attrs.x 和 slots.x 这样的方式访问内部属性。同时注意它们不像 props，attrs 和 slots 不是响应式的，如果你打算基于 attrs 和 slots 的变化做些额外的事情，你应该在生命周期函数 onUpdated 中实现。

可访问到的组件属性

当 setup 执行的时候，组件示例其实还没有被创建出来，因此，你只能访问到如下几个属性：

props
attrs
slots
emit

换句话说，以下几个属性无法获取到：

data
computed
methods

和 Templates模板一起使用

如果 setup 返回一个对象，其中的属性可以在template中访问到，包括传入其中的props：

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    props: {
      collectionName: String
    },
    setup(props) {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

在这段时间的学习中，setup返回对象是最常用的，返回后，就可以在template模块中使用。

注意：setup返回的refs对象，在template中使用时会被自动解包，因此你不需要显式的使用 .value 来获取值。

和渲染函数结合使用

setup也可以返回一个渲染函数，这个函数可以直接利用代码块中声明的其它响应式对象。

// 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])
  }
}