计算属性每次执行都会重新计算吗

不一定。计算属性的值会被缓存起来，只有在它依赖的响应式数据发生改变时，它才会重新计算。这样做可以避免不必要的计算，提高应用的性能。

举个例子，假设我们有一个计算属性`fullName`，它依赖于`firstName`和`lastName`两个数据属性：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

当我们修改`firstName`或`lastName`时，`fullName`会被重新计算。但是如果`firstName`和`lastName`都没有发生变化，`fullName`会直接返回之前缓存的计算结果，不会重新计算。

但是需要注意的是，如果我们在计算属性中使用了不稳定的数据，比如随机数或当前时间戳等，那么每次执行计算属性都会重新计算。这种情况下，我们应该使用methods选项属性来代替计算属性。

相关问题

计算属性computed是响应式的吗

是的，计算属性 (computed) 是响应式的。在 Vue.js 中，计算属性是一种依赖于其他响应式数据的衍生属性。当计算属性依赖的响应式数据发生变化时，计算属性会自动重新计算其值，并将结果缓存起来，只有在相关依赖发生改变时才会重新计算。

这种响应式的特性使得计算属性非常适合用于处理需要根据其他数据进行计算得出结果的场景。而且，由于计算属性是基于它们的依赖进行缓存的，所以多次访问同一个计算属性时，不会重复执行计算逻辑，而是直接返回缓存的结果，从而提高了性能。

需要注意的是，计算属性只有在其依赖的响应式数据发生变化时才会重新计算，如果依赖的数据没有发生改变，则会直接返回之前缓存的结果。如果我们希望在每次访问计算属性时都重新执行计算逻辑，可以使用 Vue 的另一种属性—方法(methods)。

监听属性和计算属性区别

监听属性和计算属性在Vue.js中有一些区别。监听属性是通过watch选项来定义的，它用于监听一个特定的属性，当该属性发生变化时执行相应的操作。监听属性适用于计算的内容只依赖一个属性的情况。\[3\]监听属性不会缓存结果，每次属性变化时都会重新计算。\[2\]而计算属性是通过computed选项来定义的，它是一个函数，返回的结果就是计算属性得到的结果。计算属性适用于计算的内容需要依赖多个属性的情况。\[3\]计算属性会自动缓存结果，只有依赖的属性发生变化时才会重新计算。\[1\]此外，计算属性的结果是通过return返回的，而监听属性不需要返回结果。\[3\]在watch中，可以通过参数获取到侦听属性改变的最新结果，而在computed函数中没有这种参数。\[3\]总的来说，监听属性适用于计算的内容只依赖一个属性的情况，而计算属性适用于计算的内容需要依赖多个属性的情况，并且计算属性会缓存结果，适合在数据反复变化但计算依赖内容很少变化的情况下使用。
#### 引用[.reference_title]
- *1* [计算属性和监听属性的区别](https://blog.csdn.net/qq_68609773/article/details/127800692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [计算属性（computed）和监听器（watch）的区别](https://blog.csdn.net/itcast_cs/article/details/102802310)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]