vue 组合式API

目录

为什么要引入  组合式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 函数
• 一个回调
• 可选的配置选项

代码 

结果 

 watch和watchEffect的区别:

     1.watchEffect不需要指定监听的属性 自动收集依赖 只要在回调中引用到了响应式的属性 这些属性发生改变 回调就会执行
       watch 只能侦听指定的属性 做出回调函数的执行 可以侦听多个
     2.watch可以获取到新值和旧值 watchEffect获取不到    
     3.watchEffect在组件初始化的时候就会自动执行一次 用来收集依赖 watch不需要 一开始就指定了

独立的 computed 属性

computed 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 ref 一样使用 .value property。

简单使用

结果

生命周期钩子

下表包含如何在 setup () 内部调用生命周期钩子：

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数

简单使用

运行效果

Setup 参数   props  context

props

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

 简单使用

App.vue

 Input.vue

结果

toRefs 

因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。

setup 函数中使用 toRefs 函数来完成 

简单使用 

App.vue

Input.vue

未使用 toRefs

运行效果 

 使用 toRefs

运行效果

Contex

context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值

简单探索

Input.vue

App.vue

运行结果 

context.emit context.expose

简单使用

Input.vue

 App.vue

 运行结果

Provide / Inject

provide 函数允许你通过两个参数定义 property：

1. name ( 类型)
2. value

inject 函数有两个参数：

1. 要 inject 的 property 的 name
2. 默认值 (可选)

简单使用

App.vue

 NavigationBar.vue

Search.vue

 Input.vue

运行结果

注意点: 传入整个的对象 不用.value 要不然就没有响应式了 

 点击按钮前

点击按钮后

单文件组件 script setup

为什么使用

官网:script setup

Input.vue

运行结果 

点击按钮前

点击按钮后