与Vue2.x中的watch配置功能一直
注意:监听reactive定义的响应式数据的时候,会强制开启深度监视并且oldvalue无法正确获取
监听reactive定义的响应式数据的某一个值的时候:deep 配置有效
<template>
<div class="home">
<h1>{{num}}</h1>
<h1>{{msg}}</h1>
<button @click="num++">点击num++</button>
<button @click="addmsg()">点击msg+!</button>
</div>
</template>
<script>
// 注意:vue2.x和vue3.x不要混用
// 1.引入
import { watch, ref,reactive } from "vue"
export default {
data() {
return {
}
},
computed: {
},
setup() {
let num = ref(0);
let msg = ref("hello");
let person = reactive({
name:"李国栋",
age:18,
more:{
job:"前端开发工程师",
salary:"12k"
}
})
// 1.监听ref定义的响应式数据
watch(num, (newvalue, oldvalue) => {
console.log("num变量", newvalue, oldvalue);
})
// 2.监听多个ref定义的响应式数据
watch([num, msg], (newvalue, oldvalue) => {
console.log("msg数据变化了", newvalue, oldvalue);
})
let addmsg = () => {
msg.value += "!"
}
//3.监听reactive所定义的一个响应式数据的全部属性
//注意:此处无法正确的获取oldvalue
//注意:并且强制开启了深度监视(deep配置无效)
watch(person, (newvalue, oldvalue) => {
console.log("person数据变化了", newvalue, oldvalue);
},{deep:false})
//4.监听reactive所定义的一个响应式数据的某一个属性
watch(()=>person.name, (newvalue, oldvalue) => {
console.log("person数据变化了", newvalue, oldvalue);
},{deep:false})
return { num, msg, addmsg }
}
}
</script>