目录

为什么要引入  组合式API?

 setup 组件选项

简单使用

 setup中 非响应式变量 带 ref 的响应式变量

理解

代码

效果

watch 响应式更改

代码 

 watch和watchEffect的区别:

独立的 computed 属性

简单使用

生命周期钩子

简单使用

Setup 参数   props  context

props

 简单使用

toRefs 

简单使用 

Contex

简单探索

context.emit context.expose

Provide / Inject

简单使用

运行结果

单文件组件 script setup

为什么使用

简单使用

运行结果 

为什么要引入  组合式API?

下面是一个大型组件的示例，其中逻辑关注点按颜色进行分组。

问题:

1. 这种碎片化使得理解和维护复杂组件变得困难。
2. 选项的分离掩盖了潜在的逻辑问题。
3. 在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

---

优化点:

如果能够将同一个逻辑关注点相关代码收集在一起会更好。

而这正是组合式 API 使我们能够做到的。

 setup 组件选项

在 setup 中你应该避免使用 this

原因:它不会找到组件实例。

setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

简单使用

代码

效果

 setup中 非响应式变量 带 ref 的响应式变量

理解

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值

ref 为我们的值创建了一个响应式引用。

注意:从 setup 返回的 refs 在模板中访问时是被自动浅解包的，因此不应在模板中使用 .value 但是函数中需要.value

代码

效果

点击按钮前 

点击按钮后

watch 响应式更改

• 一个想要侦听的响应式引用或 getter 函数
• 一个回调
• 可选的配置选项