如何在Vue的methods中触发computed计算属性的set方法

首先明确计算属性的触发规则：不管是在模板中使用，还是在methods等JS逻辑中使用，规则完全一致：

• 读取计算属性的值时，仅会触发get方法
• 只有当你主动给计算属性赋值时，才会触发set方法，和使用场景没有任何区别

你当前代码里的几个明显错误 #

1. 重复定义了同名计算属性isTitle：后面写的函数形式的isTitle()会直接覆盖前面定义的带get/set的对象形式配置，你写的set逻辑从一开始就不会生效。
2. 访问实例属性缺少this.前缀：methods里写的if (isTitle)访问的是全局作用域的变量，根本拿不到Vue实例上的计算属性，正确写法是if (this.isTitle)。
3. 对set的触发时机理解错误：你只是在if判断里读取isTitle的值，永远不会触发set，自然不会执行你写在set里的title赋值逻辑。如果要触发set，只需要直接给计算属性赋值即可，比如写this.isTitle = '触发set'，不管在什么位置写这句，都会执行set里的逻辑。

为什么你最初的写法被判定为计算属性的错误用法 #

计算属性的设计定位是「基于现有响应式数据派生新值」，要求get必须是无副作用的纯函数：

• 不应该在get函数内部修改其他响应式数据（比如你写的this.color = 'red'）
• 不应该在get里发起异步请求、操作DOM这类和返回计算值无关的操作

这种在get里偷偷修改其他数据的写法，会打乱响应式更新流程，很容易触发无限循环更新，也会大幅提升代码的维护成本——其他开发者读取isTitle时，完全不会预期到这个操作还会修改color的值，排查问题时非常难定位。

对应需求的正确实现方式 #

如果你要实现的逻辑是「获取title值，同时在满足条件时把color设为red」，不要把赋值逻辑塞到计算属性的get里：

• 方式1：直接在方法里处理逻辑，不需要强行用计算属性

methods: {
  getAccessToTitle () {
    // 直接读取title值，同时处理color赋值
    const isTitle = !!this.title
    if (isTitle) {
      this.color = 'red'
      this.isColor(this.color)
    }
  }
}

• 方式2：如果确实需要派生isTitle这个状态，就把color的更新逻辑放到watch监听器里，和计算属性解耦

computed: {
  isTitle() {
    return !!this.title
  }
},
watch: {
  isTitle(newVal) {
    if (newVal) {
      this.color = 'red'
    }
  }
}

• 如果你确实需要使用可写计算属性，触发set的方式非常简单，直接赋值即可，和在模板里用v-model绑定没有区别：

computed: {
  isTitle: {
    get() {
      return this.title
    },
    set(val) {
      this.title = val
      this.color = 'red'
    }
  }
},
methods: {
  getAccessToTitle() {
    // 给计算属性赋值，自动触发set
    this.isTitle = 'update title example'
    // 后续逻辑
    if (this.isTitle) {
      this.isColor(this.color)
    }
  }
}

内容的提问来源于stack exchange，提问作者cindy