1.watch
watch 是一个监听器,是Vue实例的一个属性,是用来监听数据的变化,当被监听的数据发生变化时,watch会自动触发对应的回调函数。
2.vue2中watch的用法
<template>
<div>
<button @click="count++">++</button>
姓名: <input type="text" v-model="user.username">
</div>
</template>
<script>
export default {
data() {
count:1,
user:{
username:""
}
},
watch:{
// 基本数据类型简写
count(newValue, oldValue) {
console.log('newValue', newValue);
console.log('oldValue', oldValue);
},
// count:{
// handler(newValue, oldValue) {
// console.log('newValue', newValue);
// console.log('oldValue', oldValue);
// }
// },
// 监听复杂数据类型
"user.username":{
handler(newValue, oldValue) {
console.log('newValue', newValue);
console.log('oldValue', oldValue);
}
},
user:{
handler(newValue, oldValue) {
console.log('newValue', newValue);
console.log('oldValue', oldValue);
},
deep: true, //深度监听对象的属性
immediate: true //立即执行函数,进入页面会立即执行handler函数。
}
},
}
</script>
3.vue3中的watch用法
3.1 监听简单数据类型
<template>
<div>
<input type="text" v-model="message1">
<input type="text" v-model="message.count">
</div>
</template>
<script setup lang="ts">
let message1 = ref('张')
let message = ref({
count:0
})
//监听单个属性
watch(message1, (newVal, oldVal) => {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
})
//监听多个属性
watch([message1, () => message.value.count], ([m1NewValue, mNewValue],
[m1OldValue,mOldValue]) => {
console.log('newVal', m1NewValue, mNewValue);
console.log('oldVal', m1OldValue, mOldValue);
})
</script>
3.2 监听复杂数据类型
watch监听器是惰性的,监听的数据没有改变,就不会触发,如果想组件创建时触发,可以使用immediate为true进行触发,deep为true 开启深度监听,用于深度监听一个对象或数组的变化,lush选项可以设置watch的回调函数在何时执行, pre 组件更新之前调用 sync 同步执行 post 组件更新之后执行。
<template>
<div>
<input type="text" v-model="message.nav.bar.name">
<input type="text" v-model="message.nav.bar.age">
</div>
</template>
<script setup lang="ts">
let message = ref({
nav: {
bar: {
name: '',
age:18
}
}
})
watch(message.value, (newVal, oldVal) => {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}, {
deep: true, // 深度监听
immediate:true, //立即执行
flush: 'pre' //pre 组件更新之前调用 sync 同步执行 post 组件更新之后执行
})
//也可以使用箭头函数形式 监听到具体某个属性
// watch(()=>message.value.nav.bar.age, (newVal, oldVal) => {
// console.log('newVal', newVal);
// console.log('oldVal', oldVal);
// })
</script>
4.有时候,我们可以使用computed来代替watch的使用,节省性能。computed会自动计算出结果,具有缓存性,只有当他的依赖项发生改变时,才会重新计算。
<template>
<div>
<input type="text" v-model="message1">
</div>
</template>
<script setup lang="ts">
import { reactive, ref, toRef, computed, watch } from 'vue';
let message = reactive({
count:1
})
let result = computed(() => {
return message.count * 2
})
console.log(result.value); // 2
message.count++
console.log(result.value); // 4
</script>