观察计算属性

Question

我有一个带有以下哈希值的组件

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

我应该关注更改的是isUserID还是userId? 你能监视计算属性吗?

- Kendall

---

如果您能详细说明您想要做什么，那将非常有帮助。在这里，当您获取this.ID时，同时设置this.userId，我不确定这样会起作用。 - Saurabh

@saurabh 我试图通过路由参数或组件“props”来设置数据属性，但是我不能同时使用两者，所以我想只使用计算属性并监视它。但我真正想知道的是，你能否监视计算属性？ - Kendall

Answer 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}`);
        }
    }
});

- Saurabh

---

好的，我会尝试进行翻译。为了解释这段话，有些技术语言无法完全转化为通俗易懂的语言，但我会尽量使其更加易于理解。请注意不要在翻译中添加任何解释或额外的内容。好的，我再试一次。有时候我无法获取计算属性的事件，所以最终不得不使用数据属性，这通常是计算属性的副本。是否有任何原因导致计算属性无法触发监视事件？ - Kendall

@Kendall 我不确定为什么会发生这种情况，如果您可以提供相关代码并说明哪里出了问题，那么有人可能会指出一些注意事项或错误。 - Saurabh

@Kendall 我遇到了同样的问题，计算属性的更改没有触发监视处理程序，你在这方面有任何进展吗？ - a.l.

@Kendall 看起来一旦计算函数中抛出了错误，那么它就不会再触发监视器了，请参见这个fiddle http://jsfiddle.net/j7pLbtdz/ - a.l.

我只在观察计算属性包含对象时遇到了问题。然后我必须进行深度观察： watch:{ myComputedProperty : { handler(newVal){ //当变化发生时执行某些操作}, deep: true}} - Cindy Conway

Answer 2

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

这样，我们就能观察计算属性是否发生变化，并在控制台上得到通知。

- David William

---

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

Answer 3

以下是使用Vue 3的Composition API实现的方法:

<script setup>
  import { ref, computed, watch } from 'vue'

  const variable = ref(1)

  const computedProperty = computed(() => {
    return variable.value * 2
  })

  watch(computedProperty, (newValue, oldValue) => {
    console.log('computedProperty was ' + oldValue + '. Now it is ' + newValue + '.')
  })
</script>

<template>
  <button @click="variable++">Click me</button>
</template>

- Ilyich