这是我参与更文挑战的第21天,活动详情查看: 更文挑战
一、watch与watchEffect
watch可以监听一个或多个响应式数据, 一旦数据变化, 就自动执行监听回调, 如果监听rective对象中的属性, 必须通过函数来指定, 如果监听多个数据,需要使用数组来指定,默认初始时不执行回调,当可以通过配置immediate未true,来指定初始时立即执行第一次,通过配置deep为true,来指定深度监听。
watch(prop, (newValue, oldValue) => {})监听新旧属性
<template>
<div>
{{name}} <button @click="setName">改变名称</button>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,watch } from 'vue';
export default defineComponent({
name: '',
setup() {
let name =ref('张三')
let setName = () => {
name.value = '李四'
}
watch(name, (newValue,oldValue)=>{
console.log(newValue,oldValue);
})
return {
name,
setName,
}
}
});
</script>
<style scoped>
</style>
如果是应用对象监听对象中的某个属性
{{province}} {{city}} <button @click="setArea">改变城市</button> <br>
let area = reactive({
province: '广东',
city: '深圳'
})
let setArea = () => {
area.province = '湖南'
area.city = '长沙'
}
// watch引用类型中的一个属性
watch(()=>area.province,(newValue,oldValue) => {
console.log(newValue,oldValue);
})
return {
name,
setName,
...toRefs(area),
setArea
}
如果要监听多个属性, 以数组的方式传入
watchEffect的第三个参数, 初始化就立即监听, 和深度监听
二、watchEffect
watchEffect可以不用直接指定要监听的数据,回调函数中使用的那些响应式数据就监听那些响应式数据,默认初始时就会执行第一次。
完整代码
<template>
<div>
{{ name }} <button @click="setName">改变名称</button> <br />
{{ province }} {{ city }} <button @click="setArea">改变城市</button> <br />
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs , watchEffect } from "vue";
export default defineComponent({
name: "",
setup() {
let name = ref("张三");
let setName = () => {
name.value = "李四";
};
watch(name, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
let area = reactive({
province: "广东",
city: "深圳",
});
let setArea = () => {
area.province = "湖南";
area.city = "长沙";
};
// watch引用类型中的一个属性
// watch(()=>area.province,(newValue,oldValue) => {
// console.log(newValue,oldValue);
// })
// 监听多个属性
// watch([() => area.province, () => area.city], (newValue, oldValue) => {
// console.log(newValue, oldValue);
// });
// 立即监听和深度监听
// watch([() => area.province, () => area.city], (newValue, oldValue) => {
// console.log(newValue, oldValue);
// },{
// immediate: true,
// deep: true
// });
// watchEffect 用到那个属性就会监听那个属性
watchEffect(() => {
console.log(area.province,area.city,name.value);
})
return {
name,
setName,
...toRefs(area),
setArea,
};
},
});
</script>
<style scoped>
</style>