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() 时可能会导致混淆。