【Vue3】035-Composition API：watch和watchEffect的使用和差异性
【Vue3】035-Composition API：watch和watchEffect的使用和差异性
訾博ZiBo
发布于 2025-01-06 18:10:29
发布于 2025-01-06 18:10:29
代码可运行
运行总次数：0
代码可运行
6、watch和watchEffect的使用和差异性
写法预览
// 监听一个对象
watch(name, (currentValue, prevValue) => {
console.log(currentValue, prevValue);
})
// 监听一个对象
watch(() => name.value, (currentValue, prevValue) => {
console.log(currentValue, prevValue);
})
// 监听多个对象
watch([() => obj.name, () => obj.age], ([curName, prevName], [curAge, prevAge]) => {
console.log(curName, prevName, " === ", curAge, prevAge);
})
// watch 立即执行与深度监听
watch(() => props.student, (newVal, oldVal) => {
console.log(newVal, oldVal)
}, {
// 立即执行
immediate: true,
// 深度监听
deep: true,
})
// 立即执行、只能拿到当前值、不需要特别指定监控谁，当内部使用到的数据发生改变是就会执行
watchEffect(() => {
console.log(name.value);
});watch基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, watch } = Vue;
const name = ref("zibo");
// 监听的值，值发生改变的时候的回调函数
// 特点：
// 1、具备一定的惰性 lazy
// 2、参数可以拿到当前值和原始值
watch(name, (currentValue, prevValue) => {
console.log(currentValue, prevValue);
})
return { name }
},
template: `
<div>
<div>
Name：<input v-model="name" />
</div>
<div>
Name：is {{name}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
image-20210616195947558
监听对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { reactive, watch } = Vue;
const obj = reactive({name: '大哥刘备'});
// 监听的值，值发生改变的时候的回调函数
// 特点：
// 1、具备一定的惰性 lazy
// 2、参数可以拿到当前值和原始值
// 监听对象的变化
// 可以监听的目标： watch source can only be a getter/effect function,
// a ref, a reactive object, or an array of these types.
// 直接监听 obj.name 会报错！
// 可以这么写
watch(() => obj.name, (currentValue, prevValue) => {
console.log(currentValue, prevValue);
})
return { obj }
},
template: `
<div>
<div>
Name：<input v-model="obj.name" />
</div>
<div>
Name：is {{obj.name}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
image-20210616201220061
同时监听多个目标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { reactive, watch } = Vue;
const obj = reactive({
name: '大哥刘备',
age: 62
});
// 监听多个属性，需要写成数组
watch([() => obj.name, () => obj.age], ([curName, prevName], [curAge, prevAge]) => {
console.log(curName, prevName, " === ", curAge, prevAge);
})
return { obj }
},
template: `
<div>
<div>
Name：<input v-model="obj.name" />
</div>
<div>
Name：is {{obj.name}}
</div>
<div>
Age<input v-model="obj.age" />
</div>
<div>
Name：is {{obj.age}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
image-20210616202411117
watchEffect基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, watchEffect } = Vue;
const name = ref("訾博ZiBo");
// 特点：
// 1、立即执行，非惰性，immediate；
// 2、只能拿到当前值；
// 不需要特别指定监控谁，当内部使用到的数据发生改变是就会执行
watchEffect(() => {
console.log(name.value);
});
return { name }
},
template: `
<div>
<div>
Name：<input v-model="name" />
</div>
<div>
Name：is {{name}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
image-20210616203353226
停止监听
watch 和 watchEffect 都可以用！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, watchEffect } = Vue;
const name = ref("訾博ZiBo");
const stop = watchEffect(() => {
console.log(name.value);
setTimeout(() => {
stop();
}, 3000);
});
return { name }
},
template: `
<div>
<div>
Name：<input v-model="name" />
</div>
<div>
Name：is {{name}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
image-20210616203554755
使watch也立即执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, watch } = Vue;
const name = ref("zibo");
watch(name, (currentValue, prevValue) => {
console.log(currentValue, prevValue);
},{
// 这里还可以有更多高级配置
immediate: true
})
return { name }
},
template: `
<div>
<div>
Name：<input v-model="name" />
</div>
<div>
Name：is {{name}}
</div>
</div>`
});
const vm = app.mount('#root');
</script>
</html>运行结果
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-04-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
