【Vue】Vue的监听属性与计算属性

张天龙2023-09-18 11:44

在Vue中，有两种类型的属性是用于响应式的，即监听属性和计算属性。

监听属性：监听属性是声明在Vue实例的data选项中的属性，它们用于存储应用程序中的状态或数据。当监听属性的值发生变化时，Vue会自动响应地更新绑定到该属性的视图。例如：

复制代码

`data: {
  message: 'Hello Vue!'
}
`

当message的值改变时，绑定到该属性的视图也会自动更新。

计算属性：计算属性是一种经过计算后得出的属性，它们的值依赖于其他属性的变化。与监听属性不同的是，计算属性不会直接改变应用程序的状态或数据。它们只是用于处理数据或进行计算，并将计算结果返回给视图层。当计算属性依赖的属性发生变化时，计算属性也会自动更新。例如：

复制代码

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

当firstName或lastName的值发生变化时，fullName也会自动更新。

需要注意的是，与监听属性不同的是，计算属性具有缓存机制。也就是说，当计算属性依赖的属性没有发生变化时，计算属性会直接返回缓存的计算结果，而不会重新计算。这样可以减少计算量，提高应用程序的性能。