模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

一、一般写法

例如：我们可以在代码中使用this.reversedMessage，他的值始终取决于this.message。

computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
  }
}

二、getter 和 setter

getter 和 setter 是内置的写法，让我们可以有更加灵活的组织代码：

• getter 对应的是计算属性 computed一般写法，一般是依赖变量发生变化后，引起计算属性值变化

• setter 相当于监听属性 watch，对应的计算属性的值被其它代码修改后，返回来，我们可以通过 setter 来完成一些其他的逻辑，比如修改其他变量的值，但是不推荐这样做，这会严重的增加代码逻辑的复杂程度。

fullName: {
  // getter
  get: function () {
    return this.firstName + ' ' + this.lastName
  },
  // setter
  set: function (newValue) {
    var names = newValue.split(' ')
    this.firstName = names[0]
    this.lastName = names[names.length - 1]
  }
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24