为什么Vue组件mounted钩子中更新数据后，console正常但数据未同步？

架构老林

2026-11-3

问题根源

你在mounted钩子里注册chrome消息监听时，回调使用了普通function写法，this指向完全丢失：
这时候回调的this根本不是当前Vue组件实例，你在回调里给this.subtitleURL的赋值，本质是给当前回调上下文的对象挂了个临时属性，和组件本身的响应式data没有任何关系——所以你在回调里打印的subtitleURL值是对的，但组件实例里的对应data从来没被修改过，自然不会触发视图更新，点击按钮时拿到的还是data初始的空字符串值。

修复方案

两种改法选其一即可，核心是保证回调内能正确访问到组件实例：

把回调改成箭头函数，箭头函数没有独立this，会直接继承外层mounted钩子的this（也就是正确的Vue组件实例）：

mounted() {
  chrome.extension.onMessage.addListener(async (message, sender, sendResponse) => {
    if (
      message.tabURL === document.URL &&
      this.subtitleURL !== message.subtitleURL
    ) {
      this.subtitleURL = message.subtitleURL;
    }
  });
}

兼容旧环境的写法：在mounted开头先缓存组件实例引用，回调里用这个引用做赋值操作：

mounted() {
  // 缓存组件实例
  const vm = this
  chrome.extension.onMessage.addListener(async function (message, sender, sendResponse) {
    if (
      message.tabURL === document.URL &&
      vm.subtitleURL !== message.subtitleURL
    ) {
      vm.subtitleURL = message.subtitleURL;
    }
  });
}

逻辑优化建议

调试完成后可以删掉computedFill里的测试console.log，把三元嵌套的写法改成更易读的分支判断：

computed: {
  computedFill() {
    // 无字幕URL时保持白色
    if (this.subtitleURL === "") return "#fff"
    // 有字幕URL时根据点击状态切换颜色
    return this.clicked ? "#9ef7b9" : "#1eb4d4"
  }
}