计算属性

计算属性computed()是一个函数，若一个数据需要依赖其他一些数据计算而来，可以使用计算属性

1.语法

// 只读
function computed<T>(
  getter: (oldValue: T | undefined) => T,
  // 查看下方的 "计算属性调试" 链接
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>

// 可写的
function computed<T>(
  options: {
    get: (oldValue: T | undefined) => T
    set: (value: T) => void
  },
  debuggerOptions?: DebuggerOptions
): Ref<T>

interface DebuggerOptions{
    onTrack(e:DebuggerEvent):void
    onTrigger(e:DebuggerEvent):void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type:
    | TrackOpTypes /* 'get' | 'has' | 'iterate' */
    | TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

参数：

第一个参数可以是一个getter函数，也可以是一个对象

• 当是一个getter函数时：访问此计算属性会触发此方法，返回一个只读的Ref对象
• 当是一个对象时：包含getter函数和setter函数，返回一个可修改的Ref对象
  • setter函数：当计算属性被改变时会触发此方法

debuggerOptions：一个对象，包含两个函数

• onTrack：将在响应属性或引用作为依赖项被跟踪时被调用
• onTrigger：将在侦听器回调被依赖项的变更触发时被调用。

TIP

计算属性的 onTrack 和 onTrigger 选项仅会在开发模式下工作。

2.具体使用

创建一个只读的计算属性

Js

import { ref, computed } from 'vue'

const num = ref(123)
const comNum = computed(()=>{
    return num.value*10
})

console.log(comNum.value)  // 1230

Ts

import { ref, computed } from 'vue'

const num = ref<number>(123)
const comNum = computed<number>(()=>{
    return num.value*10
})

console.log(comNum.value)  // 1230

计算属性是只读的，我们不能直接修改他的值

但是通过setter函数，我们可以间接修改其依赖的数据

Js

import { ref, computed } from 'vue'

const num = ref(123)
const comNum = computed({
    get(){
        return num.value*10
    },
    set(val){
        num.value=val
    }
})

comNum.value=10
console.log(comNum.value)  // 100

Ts

import { ref, computed } from 'vue'

const num = ref<number>(123)
const comNum = computed<number>({
    get(){
        return num.value*10
    },
    set(val:number){
        num.value=val
    }
})

comNum.value=10
console.log(comNum.value)  // 100

调试计算属性

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++