监听状态 watch
watch 函数用于监听响应式数据的变化。
使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型)。
import { ref, watch } from "vue"
export default {setup() {const text = ref("")watch(text, (current, previous) => {console.log("current", current)console.log("previous", previous)})return { text }},
}
<template><input type="text" v-model="text" />
</template>
<template><input type="text" v-model="text" />
</template>
使用 watch 监听基于 ref 创建的响应式数据 (引用数据类型)。
import { ref, watch } from "vue";
export default {name: "App",setup() {const person = ref({ name: "张三" });watch(person.value, (current) => {console.log(current);});},
};
<template><button @click="onClickHandler">{{ person.name }}</button>
</template>
使用 watch 监听响应式数据内部的具体属性 (基本数据类型)
import { ref, watch } from "vue";
export default {name: "App",setup() {const person = ref({ name: "张三" });watch(() => person.value.name,(current) => {console.log(current);});return { person };},
};
使用 watch 监听响应式数据内部的具体属性 (引用数据类型)
<template><p>{{ person.brand.title }} {{ person.name }}</p><button @click="changeBrandTitle">title</button><button @click="changeName">name</button>
</template>
<script>
import { ref, watch } from "vue";
export default {name: "App",setup() {const person = ref({ brand: { title: "宝马" }, name: "张三" });const changeBrandTitle = () => {person.value.brand.title = "奔驰";};const changeName = () => {person.value.name = "李四";};watch(person.value.brand, (current) => {console.log(current);});return { person, changeBrandTitle, changeName };},
};
</script>
使用 watch 监听基于 reactive 创建的响应式数据。
import { reactive, watch } from "vue"
export default {setup() {const person = reactive({ name: "张三" })const onClickHandler = () => {person.name = "李四"}watch(person, (current, previous) => {console.log(current)})return { person, onClickHandler }},
}
<template>{{ person.name }}<button @click="onClickHandler">button</button>
</template>
使用 watch 监听多个值的变化import { ref, watch } from "vue"
export default {setup() {const firstName = ref("")const lastName = ref("")watch([firstName, lastName], current => {console.log(current)})return { firstName, lastName }},
}
<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>
使 watch 监听数据在初始时执行一次
import { ref, watch } from "vue"
export default {setup() {const firstName = ref("hello")const lastName = ref("world")watch([firstName, lastName],current => {console.log(current)},{immediate: true,})return { firstName, lastName }},
}
监听状态 watchEffect
watchEffect 和 watch 一样,都是用于监听响应式数据的变化。
区别(重点)
watchEffect 只关心数据的最新值,不关心旧值是什么,而且 watchEffect 默认会在初始时执行一次。
import { ref, watchEffect } from "vue";export default {name: "App",setup() {const firstName = ref("");const lastName = ref("");watchEffect(() => {console.log(firstName.value);console.log(lastName.value);});return { firstName, lastName };},
};
<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>