watch
与
Vue2.x
中watch
配置功能一致
watch
函数是提供了在某个时机做一些事情,同vue
的生命周期钩子
和computed
的区别是,watch
看重的是过程变化,而computed
看重的是结果且结果是只读的,不可修改,而且computed
是提供了缓存可以提高性能,这也是和JS普通函数
的区别。使用时推荐使用watch 和 computed
示例
<template>
<div class="home">
<div>{{userInfo.name}}</div>
<div>{{userInfo.age}}</div>
<button @click="changeUserName">修改名称</button>
<button @click="changeUserAge">修改年龄</button>
</div>
</template>
<script lang="ts">
import {
defineComponent,
watch, watchEffect,
} from 'vue';
export default defineComponent({
name: 'Home',
setup(props, context) {
console.log('setup');
const userInfo = reactive({
name: '张三',
age: 18,
});
function changeUserName() {
userInfo.name = '李四';
}
function changeUserAge() {
userInfo.age = 100;
}
// 初次进入,newValue有值,oldValue无值
// 数据改变后 oldValue 不正常,oldValue 的值还是 newValue 的值
// 在使用时,如确定该对象的所有属性都要监听则可直接传入对象,否则还是建议传入监听的具体属性值
watch(userInfo, (newValue, oldValue) => {
console.log('userInfo 变化了 newValue', newValue);
console.log('userInfo 变化了 oldValue', oldValue);
}, { immediate: true, deep: true });
// 初次进入则渲染,oldValue 初次进入是 undefined
// 数据改变则渲染,oldValue 有旧版本的值
watch(() => userInfo.name, (newValue, oldValue) => {
console.log('userInfo 的 name 变化了', newValue, oldValue);
}, { immediate: true, deep: true });
// watchEffect 所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
watchEffect(() => {
const { name } = userInfo;
console.log('watchEffect配置的回调执行了', name);
});
return {
userInfo,
changeUserName,
changeUserAge,
};
},
});
</script>