首先,import watch,例如:
import { ref, computed, watch } from 'vue';
然后在 setup()
函数中调用 watch
函数:
export default {
setup() {
const firstName = ref('');
const lastName = ref('');
const uAge = ref(31);
watch(uAge, function (newValue, oldValue) {
console.log('Old age: ' + oldValue);
console.log('New age: ' + newValue);
});
const uName = computed(function () {
return firstName.value + ' ' + lastName.value;
});
const setNewAge = () => (uAge.value = 32);
return {
userName: uName,
firstName,
lastName,
age: uAge,
setAge: setNewAge,
};
};
</script>
watch
函数需要两个参数,第 1 个参数是依赖项,第 2 个参数是函数。第 1 个参数即依赖项一旦发生变化,第 2 个参数也就是函数,立即执行。
watch( age, function(newValue, oldValue) {
// ...........................................
})
第 2 个参数,也就是 function
通过 watch
自动获取两个参数,即 new 和 old 两个值。分别是新值,即 age
变化后的当前值和变化前的旧的值。
如果使用 Options API,一个 watcher 只能有一个依赖项。不同于Options API,使用 composition API, watch
依赖项可以有多个,也就是说,可以像下面这样使用依赖数组。依赖数组中的任何一项依赖发生变化,都会触发 function
的执行。如果使用依赖数组,function
自动获得的参数也会发生变化,不再是单个值,而是也变成了数组。数组里值的顺序与前面的依赖项数组一致:
watch([uAge, uName], function (newValues, oldValues) {
console.log('Old age: ' + oldValues[0]);
console.log('New age: ' + newValues[0]);
console.log('Old name: ' + oldValues[1]);
console.log('New name: ' + newValues[1]);
});
因为 uName
是 computed
值,要放在 watch
前面,下面的code顺序浏览器会有警告, watch
无法监视 uName
:
watch([uAge, uName], function (newValues, oldValues) {
console.log('Old age: ' + oldValues[0]);
console.log('New age: ' + newValues[0]);
console.log('Old name: ' + oldValues[1]);
console.log('New name: ' + newValues[1]);
});
// 应该放在watch前面!
const uName = computed(function () {
return firstName.value + ' ' + lastName.value;
});