【Vue3+Ts】—— composition API（三）计算属性

本文链接：https://blog.youkuaiyun.com/qq_53061847/article/details/125675516

本文详细探讨Vue3的Composition API，包括计算属性computed的两种用法，watchEffect的执行、停止与副作用清除，以及watch的使用和各种选项。文章还介绍了setup中使用ref、生命周期钩子、Provide与Inject函数，深入解析数据响应式和修改响应式Property。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed

在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

在前面的Options API中，我们是使用computed选项来完成的；
在Composition API中，我们可以在 setup 函数中使用 computed 方法来编写一个计算属性；

如何使用computed呢？

方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象；

第一步：先引入computed
```
import { computed } from 'vue'
```
使用：写在setup内部

setup(){
      ...
  	//计算属性——简写
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
      	// 读
          get(){
              return person.firstName + '-' + person.lastName
          },
          // 写
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })

计算属性两种用法

给computed传入函数，返回值就是计算属性的值
给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要读写计算属性的情况

Watch侦听数据的变化

在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。
在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；