<template>
<h1>{{ counter }}</h1>
<button @click="counter++">按一下</button>
<h1>{{ data.a.b.c.counter }}</h1>
<button @click="data.a.b.c.counter++">按一下</button>
</template>
<script>
import {watch,ref} from "vue";
export default {
name : "App",
setup(){
let counter = ref(1);
let data = ref({
a : {
b : {
c : {
counter : 1
}
}
}
});
// 错误的,因为获取的是一个值
// watch(counter.value,(newValue,oldValue)=>{
// });
// 可以监视到,效果和reactive是一样的,因为这里都是一个Proxy对象
watch(()=>counter.value,(newValue,oldValue)=>{
console.log(newValue,oldValue)
});
// 直接放进去,默认是没有开启深度监视的
watch(data,(newValue,oldValue)=>{
console.log(newValue,oldValue)
},{immediate:true,immediate:true});
// 这种可以监视到,因为底层还是Proxy对象
// 不需要箭头函数去指
// ref下如果包裹的是一个对象,而且watch没有指向value那个Proxy,而是指向对象本身,就不会开启深度监视
watch(data.value,(newValue,oldValue)=>{
console.log(newValue,oldValue)
},{deep:false});// 一定会默认启动deep深度监视,配置是无效的
return {counter,data};
}
}
</script>
<style>
</style>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.