vue3 computed缓存

在Vue3中，computed属性的缓存行为与Vue2中略有不同。Vue3中的computed属性是懒计算的，仅在依赖项改变时才会重新计算。此外，Vue3中的computed属性默认情况下是缓存的，即依赖项未改变时，computed属性的值会被缓存起来，下次访问时直接返回缓存的值，而不是重新计算。这样可以避免不必要的计算和渲染。

需要注意的是，Vue3中computed属性的缓存是基于依赖项的，只有在依赖项改变时才会重新计算。如果computed属性内部使用了其他响应式数据，并且这些数据改变时，computed属性也会被重新计算。

如果想要关闭computed属性的缓存，可以给computed属性添加一个配置项`cache: false`，这样每次访问computed属性都会重新计算。

相关问题

vue computed缓存

Vue.js的Computed属性是一种响应式计算属性，它们会根据数据的变化自动更新。当你在一个Computed属性中定义了一个函数，并依赖于某些数据（通常是通过`this.$data`访问），Vue会在初始化实例时将这个函数的结果缓存起来。如果依赖的数据发生变化，Computed会自动重新计算并返回新的结果。

`$computed`对象的一个重要特性就是缓存功能，这使得当依赖的数据改变时，只会影响到那些受影响的计算，而不是所有依赖该计算的地方。这提高了性能，特别是在处理大量计算或者深层次嵌套的依赖链时。

例如：

export default {
  data() {
    return {
      message: 'Hello',
      firstName: 'John'
    }
  },
  computed: {
    fullName() {
      // 缓存了 firstName 和 message 的组合结果
      return this.firstName + ' ' + this.message;
    }
  }
}

当你更改`message`或`firstName`时，`fullName`只会更新一次，除非你直接修改它。这是Vue.js优化计算过程的重要手段。

vue3 computed

computed是Vue3中的一个特性，也可以称为计算属性。它用于根据其他响应式数据进行计算并返回一个新的值。computed具有缓存的特性，只有相关的响应式数据发生变化时，才会重新计算其值。此外，computed还可以通过setter方法实现对计算属性的修改。

在Vue3中，computed可以使用简写形式和完整形式。简写形式可以直接传入一个函数，函数中返回计算属性的值。完整形式可以传入一个对象，该对象包含get和set方法。get方法用于获取计算属性的值，set方法用于对计算属性进行修改。

下面是一个使用computed的示例代码：

<template>
  <div>
    <div>姓：<input type="text" v-model="per.surname"></div>
    <div>名：<input type="text" v-model="per.name"></div>
    <div>姓名：<input type="text" v-model="per.fullName"></div>
  </div>
</template>

<script>
import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    per.fullName = computed(() => {
      return per.surname + ' ' + per.name
    })

    return { per }
  }
}
</script>

<style>
</style>

以上代码中，我们创建了一个响应式对象per，其中包含surname和name两个属性。我们使用computed创建了一个计算属性fullName，它的值由per.surname和per.name拼接而成。在模板中，我们通过v-model将输入框的值与per.surname、per.name和per.fullName进行绑定。