vue3计算属性computed

计算属性computed

import { computed } from "vue"

// 方式一
// const collapse = computed(() => {
//     console.log('计算属性变化');
//     return isCollapse
// })

// 方式二
const collapse = computed({
  get:() => { 
    // 返回订阅值
    return isCollapse
   },
   set: (val) => {
       // 这里可以对监听的值做附加操作,val就是订阅值
       // num.value++
    }
})

另外，你也可以在计算属性中做更多的逻辑操作，只要计算属性中的数据发生变化，计算属性就会启动，例如：

// 方式一
const collapse = computed(() => {
    let status = isCollapse.value ? '是' : '否'
    return  status
})
// 方式二
const collapse = computed(() => {
    return  isCollapse.value ? '是' : '否'
})

注意点：
1、computed具备懒计算的特性，当依赖数据改变时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算。

<template>
  <div>
    {{ collapse }}
  </div>
</template>

2、watch和computed的区别在于，watch是每次订阅值变化都会主动触发；computed是只有订阅值变化后，只有需要读取属性的时候，它才会真正计算。

computed可以设置多个依赖属性，并对其监听，如果依赖的值发生变化了，computed则会调用计算，并返回计算后的值。当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算。例如：

// 计算a + b 的总和，如果a\b变化则计算属性自动触发，可以想象成计算器效果
const total = computed(() => {
  return a.value + b.value
})

// 根据依赖值计算
const total = computed(() => {
  a.value = props.check(a.value, 1, 30);
  b.value = props.check(b.value, a.value + 1, 30);
  return `${a.value}-${b.value}`
})

当我们需要监听某值的变化来执行异步操作或调用函数时，应该使用watch.
当我们需要依赖设置的属性值来执行监听并自动计算时，应该使用computed.