vue3 computed计算属性

        我们在使用模版语法时有时会使用三位运算符去处理一些简单的逻辑，当一个变量的值依赖了其它变量，并进行了一些逻辑上的处理时，我们可以使用computed计算属性去处理。

        一个小栗子,使用计算属性判断一本书是否被出版，代码如下：

<template>
  <h2>Computed计算属性的使用</h2>
  <div class="box">
    <div>
      <div>图书{{ bookName }}{{ isPublic }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";

// 计算属性的使用
const bookName = "Happy Book";
const isPublic = computed(() => {
  return bookName.length > 0 ? "已出版" : "未出版"
});
</script>

        计算属性的值与其它属性有计算关系时，使用计算属性可以把独立的计算逻辑代码块包装到函数里

        一个小栗子，两个字符串常量组成一本被出版的书名，书名我们使用计算属性，代码如下：

<template>
  <h2>Computed计算属性的使用</h2>
  <div class="box">
    <div>
      <div>图书{{ bookName }}{{ isPublic }}</div>
    </div>
    <div>
      <div>作者名字：{{ fullName }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";

const bookName = "Happy Book";
const isPublic = computed(() => {
  return bookName.length > 0 ? "已出版" : "未出版"
});

const firstName = "Alisa";
const lastName = "Jiao";
const fullName = computed(() => {
  return firstName + lastName;
})
</script>

        计算属性的值在它依赖的属性值改变时随之改变，当它依赖的属性值不变时，计算属性的值会被存在缓存中，下一次读取这个值时，会直接在缓存中读取

        注：在使用时需要注意，计算属性所依赖的属性必须是响应式的，比如这里的publicNum是个ref的值

        一个小栗子，使用计算属性定义一本书的出版次数，代码如下：

<template>
  <div class="box">
    <div>出版次数: {{ publicVal }}</div>
    <div>
        <button style="background-color: aquamarine; padding: 10px; margin: 10px;" @click="sendPublic">出版</button>
    </div>
  </div>
  
</template>
<script setup lang="ts">
import { ref, computed } from "vue";

let publicNum = ref(0);
const publicVal = computed(() => {
  console.log("cumputed publicNum = ", publicNum.value);
  return publicNum.value+ "次";
});
const sendPublic = () => {
  publicNum.value = Number(publicNum.value) + 1;
  console.log("publicNum = ", publicNum.value);
}
</script>

        计算属性其实是由geter setter组成，官方文档指出：cumputed方法期望接受一个getter函数，返回一个计算属性ref，通过访问计算属性的value值，可以访问计算的结果。但官方文档提倡计算属性：Getter不应有副作用，避免直接修改计算属性的值.

        下面这样使用是官方不提倡的:

<template>
  <div class="box">
    <div>
        <button style="background-color: aquamarine; padding: 10px; margin: 10px;" @click="sendChangeDate">修改出版日期</button>
    </div>
    <div>
      <div>出版日期依赖的属性：year = {{ year }}, month = {{ month }}</div>  
    </div>
  </div>
  
</template>
<script setup lang="ts">
import { ref, computed } from "vue";

const year = ref("2024");
const month = ref("1");
const publicDate = computed({
  get(){
    return year.value.toString() + "." + month.value.toString();
  },
  set(newValue){
    [year.value, month.value] = newValue.split(".");
  }
})
const sendChangeDate = () => {
  publicDate.value = "2024.2";
}
</script>

小结

使用总结：

1 Getter不应有副作用

        不要改变其它状态，不要在getter中做异步请求或者更改Dom

2 避免直接修改计算属性，如上边的这个使用场景

        注：计算属性还有个常用的使用场景，可以设置动态样式，当计算属性依赖的值改变时，去更新元素的style