setup() 介绍
参考官方文档
使用 setup 函数时,它将接收两个参数:
props
context
//让我们更深入地研究如何使用每个参数
Props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样,setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。
Context
传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象,暴露了其它可能在 setup 中有用的值:
访问组件的 property
执行 setup 时,你只能访问以下 property:
props
attrs
slots
emit
换句话说,你将无法访问以下组件选项:
data
computed
methods
refs (模板 ref)
#结合模板使用
如果 setup 返回一个对象,那么该对象的 property 以及传递给 setup 的 props 参数中的 property 就都可以在模板中访问到:
使用渲染函数
setup 还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态
使用 this
在 setup() 内部,this 不是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆。
setup入口函数
** 能够理解setup函数的作用和调用时机**
export default {
setup () {
console.log('setup执行了')
console.log(this)
},
beforeCreate() {
console.log('beforeCreate执行了')
console.log(this)
}
}
总结:主要内容
- setup 函数是一个新的组件选项,作为组件中组合式API 的起点(入口)
- setup函数只会在组件初始化的时候执行一次
- setup函数在beforeCreate生命周期钩子执行之前执行,this不指向当前实例
响应式API - reactive
作用
reactive是一个函数,接收一个普通的对象传入,把对象数据
转化为响应式对象并返回
使用步骤
- 从vue框架中导入
reactive
函数 - 在setup函数中调用reactive函数并将想要变成响应式的对象数据当成参数传入
- 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
<template>
<div>{
{
state.name }}</div>
<div>{
{
state.age }}</div>
<button @click="state.name = 'pink'">改值</button>
</template>
<script>
import {
reactive } from 'vue'
export default {
setup() {
const state=reactive({
name:'cp',
age:18
})
return {
state
}
}
}
</script>
响应式API - ref
作用
ref是一个函数,接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
使用步骤
- 从vue框架中导出
ref
函数 - 在setup函数中调用
ref
函数并传入数据(简单类型或者复杂类型) - 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
- **注意:**在setup函数中使用ref结果,需要通过
.value
访问,模板中使用不需要加.value
reative 对比 ref
知道俩个API的特定以及如何在项目中选择
1. ref 函数可以接收一个简单类型的值,返回一个可改变的 ref 响应式对象,从而弥补reactive函数不支持简单类型的问题
2. reactive和ref函数都可以提供响应式数据的转换,具体什么时候需要使用哪个API社区还没有最佳实践,大家暂时可以使用自己熟练的API进行转换
3. **推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reactive,否则就一律使用ref,从而降低在语法选择上的心智负担