观察计算属性答案

【问题标题】：Watching computed properties观察计算属性
【发布时间】：2017-04-25 08:13:56
【问题描述】：

我有一个具有以下哈希的组件

{ 
  computed: { 
    isUserID: { 
      get: function(){
         return this.userId? 
      } 
  }
}

我应该关注isUserID 或userId 的变化吗？你能看计算属性吗？

【问题讨论】：

如果您能详细说明您正在尝试做什么，那么回答将非常有帮助。在这里，当你得到this.ID 而设置this.userId 时，我不确定这将如何工作。
@saurabh 我试图通过路由参数或组件“props”设置数据属性，因为我不能同时做这两个我想只使用计算属性并观察它。但我真正想知道的是你能看一个计算属性吗？

标签： vue-component vuejs2 computed-properties

【解决方案1】：

是的，您可以在computed 属性上设置watcher，请参阅fiddle。

以下是在计算属性上设置监视的代码：

const demo = new Vue({
    el: '#demo',

    data() {
        return {
            age: ''
        };
    },

    computed: {
        doubleAge() {
            return 2 * this.age;
        }
    },

    watch: {
        doubleAge(newValue) {
            alert(`yes, computed property changed: ${newValue}`);
        }
    }
});

【讨论】：

好的，我会再试一次，有时我无法获取计算属性的事件，所以我最终不得不使用数据属性，而这通常是计算属性的副本。计算属性无法触发监视事件是否有任何原因？
@Kendall 我不确定为什么会发生这种情况，如果您可以将相关代码放在它不起作用的地方，那么有人可能会指出一些警告或错误。
@Kendall 我也遇到了同样的问题，computed 的改变不会触发 watch handler，你有什么进展吗？
@Kendall 好像一旦在计算函数中抛出错误，就不会再触发观察者了，请看小提琴jsfiddle.net/j7pLbtdz
我只在查看包含对象的计算属性时遇到问题。然后我不得不做一个深度观察：watch:{ myComputedProperty : { handler(newVal){ //do something when change happens}, deep: true}}

【解决方案2】：

computed: {
  name: {
    get: function(){
      return this.name;
    }
  }
},
watch: {
  name: function(){
    console.log('changed');
  }
}

这样我们可以监视计算属性，如果它被更改，我们会在控制台上收到通知。

【讨论】：

我是新手，所以现在不太了解选项，我认为它看起来更好。