Vue 2 watch 对于 mixin 数据属性失败，但如果组件具有数据属性则可以工作答案

【问题标题】：Vue 2 watch fails for mixin data property, but works if the component has the data propertyVue 2 watch 对于 mixin 数据属性失败，但如果组件具有数据属性则可以工作
【发布时间】：2021-10-31 13:28:04
【问题描述】：

我正在尝试将一些功能从组件移动到 vue mixin，以便能够在多个组件中使用它。

这（代码的简化版本）有效：

export default {
  data() {
    return {
      file: {},
      audioPlayer: {
        sourceFile: null,
      },
    };
  },
  watch: {
    'audioPlayer.SourceFile': function (nextFile) {
       console.log('new sourceFile');
       this.$data.file = nextFile;
    },
  }
}

但是，如果我将 audioPlayer 数据对象移动到 mixin，手表将不再触发。

这是预期的行为吗？

注意我通过直接将“文件”数据属性转换为计算值解决了这个问题，这在这种特殊情况下有效，但行为仍然很奇怪。

【问题讨论】：

标签： javascript vue.js vuejs2 watch

【解决方案1】：

您需要一个小写的s。 sourceFile 不是SourceFile

watch: {
    'audioPlayer.sourceFile': function (nextFile) {
       console.log('new sourceFile');
       this.$data.file = nextFile;
    },
  }

【讨论】：

如果是这样，那我一定是真的忽略了。我会检查这是否不是我的问题中的错字。