{{ bottomInfo.content }}
Vue组合式API--计算属性、生命周期、监听器、依赖注入、setup函数语法糖
一、setup中的computed(计算属性)
对于任何包含响应式数据的复杂逻辑，都应该使用计算属性。
在前面的Options API（选项式API）中，是使用computed选项来完成计算属性的定义。
在Composition API(组合式API)中，我们可以在setup函数中使用computed方法来编写一个计算属性。
setup中如何使用computed：
1）基本写法
接收一个getter函数，并为getter函数返回的值，返回一个不变的ref对象。
{{ fullname }}
可以看到注意点有两个：
- 一定要先引入
computed才能够在setup函数中使用 - 给计算属性赋值时需要使用
.value属性，因为它是一个ref对象
2）监听多个计算属性
3）完整语法
接收一个具有get和set的对象，返回一个可变的（可读写）ref对象。
{{ fullname }}
二、setup中如何使用监听器
在组合式API中，可以使用watchEffect和watch来完成响应式数据的侦听：
-
watchEffect：用于自动收集响应式数据的依赖 -
watch：需要手动指定侦听的数据源，数据变化时执行其回调函数默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调
2.1 watch
1） 监听一个数据源
const info = reactive({
name: "why",
age: 18,
friend: {
name: "kobe"
}
})
watch(info, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
2）监听多个数据源
const info = reactive({
name: "why",
age: 18,
friend: {
name: "kobe"
}
})
const message = ref("Hello watch");
watch([info, message], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
3） 关于深度监听和立即执行
默认情况下，组合式API中的watch函数就已经帮我们进行深度监听了。
当然也可以选择传入deep显式指定。
而立即执行则需要传入immediate显式指定。
const info = reactive({
name: "why",
age: 18,
friend: {
name: "kobe"
}
})
watch(info, (newValue, oldValue) => {
console.log(newValue, oldValue)
},{
immediate: true,
deep: true
})
2.2 watchEffect
1）基本使用
当监听到某些响应式数据变化时，我们希望执行某些操作，这个时候可以使用watchEffect。
首先，watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖； 其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行
2）停止监听
有时希望可以让watchEffect停止侦听。此时可以获取watchEffect的返回值函数，调用该函数即可。
2.3 watch/watchEffect区别
watch必须制定数据源,watchEffect自动收集依赖watch监听到改变, 可以拿到改变前后value，watchEffect只能拿到变化后的watchEffect默认直接执行一次，watch在不设置immediate第一次是不执行
三、setup中如何使用ref获取元素或者组件
上一篇已经说过了如何使用ref函数去定义响应式数据。
而Vue2.x中的有一个通过ref属性去获取DOM元素或者组件。这在Vue3.x的setup函数中又是怎么做到的呢？
setup函数中的方式是定义一个ref对象，绑定到元素或者组件的ref属性上即可。
四、setup中如何使用生命周期钩子
4.1 使用示例
使用起来就是先引入，然后在setup函数中进行使用，需要接收一个函数对象，一般就要箭头函数。
4.2 选项式API和组合式API的对应关系
| 选项式API | setup中对应的组合式API |
|---|---|
| beforecreate | Not needed* |
| created | Not needed* |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeupdate | onBeforeupdate |
| updated | onupdated |
| beforeunmount | onBeforeunmount |
| unmounted | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
4.3 为什么没有beforecreate和created对应的组合式API
因为setup是围绕beforecreate和created生命周期钩子运行的，所以不需要显式地定义它们。
因此在这些钩子中编写的任何代码都可以直接在setup函数中编写。
五、setup中如何使用依赖注入
5.1 Provide函数
provide函数可以传入两个参数：
-
name：提供的属性名称；
-
value：提供的属性值
const name = ref("张三")
provide("name", name)
provide("age", 18)
为了增加 provide值和 inject 值之间的响应性，我们可以在provide值时使用ref和reactive。
就想这里的age就不具备响应式。
5.2 Inject函数
在后代组件中可以通过inject函数来注入需要的属性和对应的值.
Inject函数可以传入两个参数(可以只传其一)：
-
要注入的属性的名称；
-
注入属性不存在时的默认值；
const name = inject("name")
const age = inject("age", 0)
对于复杂数据的传共享，都会使用
Vuex或者pinia去共享数据。大部分情况不会去使用依赖注入的方式
六、setup语法糖
6.1
注意点：
-
如何使用？
将
setup属性 添加到defineProps()函数的返回值是一个只读属性，只能使用，不能修改。6.4 如何发出事件
使用
setup语法糖时，提供了defineEmits()函数去发出事件，从而给父元素传递一些信息。6.4 如何暴露方法或者属性
使用
父组件：