【Vue】05
【Vue】05
6、watch和watchEffect的使用和差异性写法预览代码语言:javascript代码运行次数:0运行复制// 监听一个对象
watch(name, (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
})
// 监听一个对象
watch(() => name.valu
【Vue】05
写法预览
代码语言:javascript代码运行次数:0运行复制// 监听一个对象
watch(name, (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
})
// 监听一个对象
watch(() => name.value, (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
})
// 监听多个对象
watch([() => , () => obj.age], ([curame, prevame], [curAge, prevAge]) => {
cole.log(curame, prevame, " === ", curAge, prevAge);
})
// watch 立即执行与深度监听
watch(() => props.student, (newVal, oldVal) => {
cole.log(newVal, oldVal)
}, {
// 立即执行
immediate: true,
// 深度监听
deep: true,
})
// 立即执行、只能拿到当前值、不需要特别指定监控谁,当内部使用到的数据发生改变是就会执行
watchEffect(() => {
cole.log(name.value);
});
watch基本使用
代码语言:javascript代码运行次数:0运行复制<!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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, watch } = Vue;
ct name = ref("zibo");
// 监听的值,值发生改变的时候的回调函数
// 特点:
// 1、具备一定的惰性 lazy
// 2、参数可以拿到当前值和原始值
watch(name, (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
})
return { name }
},
template: `
<div>
<div>
ame:<input v-model="name" />
</div>
<div>
ame:is {{name}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
监听对象
代码语言:javascript代码运行次数:0运行复制<!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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { reactive, watch } = Vue;
ct 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.
// 直接监听 会报错!
// 可以这么写
watch(() => , (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
})
return { obj }
},
template: `
<div>
<div>
ame:<input v-model="" />
</div>
<div>
ame:is {{}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
同时监听多个目标
代码语言:javascript代码运行次数:0运行复制<!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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { reactive, watch } = Vue;
ct obj = reactive({
name: '大哥刘备',
age: 62
});
// 监听多个属性,需要写成数组
watch([() => , () => obj.age], ([curame, prevame], [curAge, prevAge]) => {
cole.log(curame, prevame, " === ", curAge, prevAge);
})
return { obj }
},
template: `
<div>
<div>
ame:<input v-model="" />
</div>
<div>
ame:is {{}}
</div>
<div>
Age<input v-model="obj.age" />
</div>
<div>
ame:is {{obj.age}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
watchEffect基本使用
代码语言:javascript代码运行次数:0运行复制<!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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, watchEffect } = Vue;
ct name = ref("訾博ZiBo");
// 特点:
// 1、立即执行,非惰性,immediate;
// 2、只能拿到当前值;
// 不需要特别指定监控谁,当内部使用到的数据发生改变是就会执行
watchEffect(() => {
cole.log(name.value);
});
return { name }
},
template: `
<div>
<div>
ame:<input v-model="name" />
</div>
<div>
ame:is {{name}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
停止监听
代码语言:javascript代码运行次数:0运行复制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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, watchEffect } = Vue;
ct name = ref("訾博ZiBo");
ct stop = watchEffect(() => {
cole.log(name.value);
setTimeout(() => {
stop();
}, 000);
});
return { name }
},
template: `
<div>
<div>
ame:<input v-model="name" />
</div>
<div>
ame:is {{name}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
使watch也立即执行
代码语言:javascript代码运行次数:0运行复制<!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="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, watch } = Vue;
ct name = ref("zibo");
watch(name, (currentValue, prevValue) => {
cole.log(currentValue, prevValue);
},{
// 这里还可以有更多高级配置
immediate: true
})
return { name }
},
template: `
<div>
<div>
ame:<input v-model="name" />
</div>
<div>
ame:is {{name}}
</div>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间: 2025-07-23 08:44:14
推荐阅读
留言与评论(共有 6 条评论) |
本站网友 中央文史馆 | 25分钟前 发表 |
() => obj.age] | |
本站网友 华夏之声 | 4分钟前 发表 |
}) // 立即执行 | |
本站网友 河西租房 | 0秒前 发表 |
prevame | |
本站网友 大连房地产网 | 27分钟前 发表 |
具备一定的惰性 lazy // 2 | |
本站网友 骑驴找马什么意思 | 23分钟前 发表 |
}) // 立即执行 |