Bootstrap

vue3 ---> setup() 用法 响应式API - reactive 响应式API - ref

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
;