vue computed的用法

笔记2024-01-0515 人已阅来源:网络

在 Vue.js 中,computed 是一种用于声明计算属性的特殊属性。通过使用 computed,您可以以一种声明式的方式来定义依赖于其他属性的属性。这些计算属性会根据它们的依赖进行缓存,只有在依赖发生变化时才会重新计算。

以下是 computed 的基本用法:

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的例子中,我们定义了一个 computed 属性 fullName,它依赖于 firstName 和 lastName。每当 firstName 或 lastName 发生变化时,fullName 会重新计算并更新。在模板中,您可以像访问普通属性一样访问计算属性:

<div id="app">
  <p>{{ fullName }}</p>
</div>

此时,{{ fullName }} 会动态地显示 John Doe,并且会在 firstName 或 lastName 发生变化时自动更新。

除了基本用法之外,computed 还可以接受一个对象形式的计算属性,用于定义多个计算属性。您还可以在计算属性中使用 get 和 set 方法,以及在计算属性中监听其他属性的变化。