观察计算属性

我有一个具有以下散列的组件

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

我应该观察 isUserID或 userId的变化吗? 你能观察计算属性吗？

110619 次浏览

小开

最佳答案

是的，您可以在计算出来的属性上设置守望者，请参阅小提琴。

以下是在计算属性上设置 watch 的代码:

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


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


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


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

小开

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

通过这种方式，我们可以在计算属性发生变化时监视它，我们可以在控制台上获得通知。

小开

下面是在 Vue 3中使用组合 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>