Vue计算属性computed()

1. 计算属性定义

获取计算属性值

<div>{{ 计算属性名称}}</div>

创建计算属性

let 定义的属性=ref/reactive....

let 计算属性名称 = computed(() => {
  //这里写函数式,函数式里面包含定义属性
  //只有这个包含的定义属性被修改时才出发此函数式
  //通过计算属性名称countPass0,返回函数式的值
  return 函数式;
});


let 计算属性名称 = computed({
  // getter
  get() {
    //这里写函数式,函数式里面包含定义属性
    //只有这个包含的定义属性被修改时才出发此函数式
    //通过计算属性名称countPass0,返回函数式的值
    return 函数式;
  },
  // setter
  set(newValue) {
    // get方法中包含的定义属性
    // newValue为计算属性名称.value获取的值
    定义属性=newValue
  },
});

计算属性赋值

计算属性名称.value=给与计算属性的值

2. 计算属性案例

<template>
  <!--在DOM元素调用变量时,不需要指定输出变量的value,因为Vue会帮你输出.value
  但是注意,这个帮助只会帮助顶级的ref属性才会被解包-->
  <div>{{ p.count }}</div>
  <br>
  <div>count是否大于0:{{ countPass0 }}</div>
  <br>
  <div>count是否大于0:{{ countPass0GetSet }}</div>
  <br>
  <button @click="countAdd">设置count等于1</button>
</template>
<script setup>
//从vue中获取ref方法
import { computed, reactive } from "vue";

name: "App";
let p = reactive({
  count: 0,
});

//定义计算属性countPass0判断p.count是否大于0
let countPass0 = computed(() => {
  return p.count > 0 ? "是" : "否";
});

//定义计算属性countPass0GetSet判断p.count是否大于0()
let countPass0GetSet = computed({
  // getter
  get() {
    return p.count > 0 ? "是" : "否";
  },
  // setter
  // 在直接修改p.count的情况下set()方法不会被执行,只有改变countPass0GetSet.value时才会执行set()
  set(newValue) {
    // newValue的值为countPass0GetSet.value的新值,
    p.count = newValue;
    console.log('计算属性收到的新值:',newValue);
  },
});

function countAdd(){
  countPass0GetSet.value=1
}
</script>

<style scoped>
</style>

3. 计算属性与方法区别
说白了方法每次执行都会被调用,而计算属性只有内部属性值被改变的时候才会被调用
let countPass0 = computed(() => Date.now());
这个计算属性永远不会被调用,因为里面不包含任何定义的属性,所以不会触发countPass0这个计算属性

4.其他
Getter 不应有副作用​
计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要改变其他状态、在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用侦听器根据其他响应式状态的变更来创建副作用。

避免直接修改计算属性值​
从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。