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.it)
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)
}
原⽂地址
参数
使⽤setup函数时，它将接受两个参数：
1. props
vue中reactive2. context
Props
setup函数中的第⼀个参数是props。正如在⼀个标准组件中所期望的那样，setup函数中的props是响应式的，当传⼊新的 prop 时，它将被更
新。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
WARNING
但是，因为props是响应式的，你不能使⽤ ES6 解构，因为它会消除 prop 的响应性。
如果需要解构 prop，可以通过使⽤setup函数中的来完成此操作：
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.it)
}
}
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返回的在模板中访问时是的，因此不应在模板中使⽤.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()时可能会导致混淆。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。