computed

选项式API中使用computed:

export default {
  data() {
    return {
      message: "helloWord",
    };
    o;
  },
  computed: {
    //计算属性,只要依赖值不变,就不会重新计算(有缓存),计算属性将基于它们的响应依赖关系缓存,提高性能
    // reverseMsg: function () {
    //   console.log("计算属性");
    //   return this.message.split("").reverse().join("");
    // },
    
    //完整的写法
    //每一个计算属性都有一个getter和setter
    reverseMsg: {
      //计算属性一般是 没有set方法,计算属性是只读属性
      set: function (newValue) {
        //在计算或更改计算属性的时候调用
        console.log(newValue);
        this.message = newValue;
      },
      get: function () {
        console.log("计算属性2");
        return this.message.split("").reverse().join("");
      },
    },
  },
  methods: {
    reverseMessage: function () {
      console.log("methods");
      return this.message.split("").reverse().join("");
    },
  },
};
</script>
<template>
  <p>{{ message }}</p>
  <!-- 第一种:js表达式,总共会计算三次 -->
  <p>{{ message.split("").reverse().join("") }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>
<!-- 第二种:计算属性,只计算一次 -->
  <p>{{ reverseMsg }}</p>
  <p>{{ reverseMsg }}</p>
  <p>{{ reverseMsg }}</p>
  <!-- 第三种:方法,计算三次 -->
  <p>{{ reverseMessage() }}</p>
  <p>{{ reverseMessage() }}</p>
  <p>{{ reverseMessage() }}</p>
  <button @click="reverseMsg = '你好'">改变reverseMsg</button>
</template>

组合式API中使用computed:

// 组合式:将同一个逻辑关注点相关代码收集在一起
  setup() {
    const counter = ref(0);
    const msg = ref("helloWord");
    const reverseMsg = computed(() => {
      //返回一个带有value属性的对象
      return msg.value.split("").reverse().join("");
    });
    console.log(reverseMsg.value); //有value属性

    const user = reactive({
      name: "张三",
      age: 18,
      reverseMsg: computed(() => {
        return msg.value.split("").reverse().join("");
      }),
    });
    console.log(user.reverseMsg); //没有value属性
    return { counter, user, msg };
  },

计算属性值会基于其响应式依赖被缓存,方法调用总是会在重渲染发生时再次执行函数

Getter 不应有副作用

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。

避免直接修改计算属性值

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