>[success] # 计算属性 -- computed 1. 在`Composition API`中，我们可以在 `setup `函数中使用 `computed `方法来编写一个计算属性 * 接收一个`getter`函数，并为 `getter `函数返回的值，返回一个不变的 `ref `对象 * 接收一个具有 `get `和 `set `的对象，返回**一个可变的（可读写）ref 对象** >[danger] ##### 案例 1. 下面案例返回是一个不变的响应式`ref `对象，因此进行改写会报错 ~~~ const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误 ~~~ >[danger] ##### 案例 1. 和 `option Api` 一样可以定义`getter `和`setter`，传入的是一个对象，但是此时返回一个**可变的（可读写）ref 对象** ~~~ const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0 ~~~ * 官网案例 ~~~ <script setup> import { ref, computed } from 'vue' const firstName = ref('John') const lastName = ref('Doe') const fullName = computed({ // getter get() { return firstName.value + ' ' + lastName.value }, // setter set(newValue) { // 注意：我们这里使用的是解构赋值语法 [firstName.value, lastName.value] = newValue.split(' ') } }) </script> ~~~ >[info] ## 调试钩子 1. 在开发环境调试阶段，vue 也为其 提供两个钩子函数`onTrack`和`onTrigger` * `onTrack`将在响应属性或引用作为依赖项被跟踪时被调用。 * `onTrigger`将在侦听器回调被依赖项的变更触发时被调用。 ~~~ const plusOne = computed(() => count.value + 1, { onTrack(e) { // 当 count.value 被追踪为依赖时触发 debugger }, onTrigger(e) { // 当 count.value 被更改时触发 debugger } }) // 访问 plusOne，会触发 onTrack console.log(plusOne.value) // 更改 count.value，应该会触发 onTrigger count.value++ ~~~ >[info] ## 官方地址 [computed](https://cn.vuejs.org/api/reactivity-core.html#computed) [# 计算属性](https://cn.vuejs.org/guide/essentials/computed.html) [### 计算属性调试](https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging)