<template> <h1>{{ data.counter }}</h1> <button @click="data.counter++">按一下加一</button> <h1>{{ data.a.b.c.d.counter1 }}</h1> <button @click="data.a.b.c.d.counter1++">按一下加一</button> </template> <script> import { reactive,watch } from 'vue' export default { name : "App", setup(){ let data = reactive({ counter : 1, a : { b : { c : { d: { counter1 : 100 } } } } }); // 对于reactive监视的属性来说,默认就是开启深度监视的 // 如果需要针对对象的某属性,那就只指定这个属性即可 watch(data,(newValue,oldValue) => { // 对于reactive来说,新的可以获取,老的获取不了 console.log("我是新的"+newValue+"我是旧的"+oldValue); // newValue可以获取,但是old获取不了 },{immediate:true}); // 如果我们只需要侦听一个属性,我们就写一个函数,只侦听那一个属性即可 // 因为我们最后获取的是一个基本数据类型的值,所以不能直接指向它,必须是以函数的形式返回 // 除非那个是一个响应式的对象 watch(()=>{return data.counter},(newValue,oldValue) => { console.log("我是新的"+newValue+"我是旧的"+oldValue); },{immediate:true}); watch(()=>data.a.b.c.d.counter1,(newValue,oldValue)=>{ console.log("我是新的"+newValue+"我是旧的"+oldValue); },{immediate:true}); // 监听数组的方式 watch([()=>data.counter,()=>data.a.b.c.d.counter1],(newValue,oldValue)=>{ console.log("我是新的"+newValue+"我是旧的"+oldValue); },{immediate:true}); // 这个还是oldValue获取不了,但是可以使用深度监视效果了 watch(()=>data.a.b,(newValue,oldValue)=>{ console.log("我是新的"+newValue+"我是旧的"+oldValue+"哈哈哈哈"); },{immediate:true,deep:true}); return {data}; } } </script> <style> </style>
<template>
? ? <h1>{{ data.counter }}</h1>
? ? <button @click="data.counter++">按一下加一</button>
? ? <h1>{{ data.a.b.c.d.counter1 }}</h1>
? ? <button @click="data.a.b.c.d.counter1++">按一下加一</button>
</template>
<script>
import { reactive,watch } from 'vue'
export default {
? ? name : "App",
? ? setup(){
? ? ? ? let data = reactive({
? ? ? ? ? ? counter : 1,
? ? ? ? ? ? a : {
? ? ? ? ? ? ? ? b : {
? ? ? ? ? ? ? ? ? ? c : {
? ? ? ? ? ? ? ? ? ? ? ? d: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? counter1 : 100
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? // 对于reactive监视的属性来说,默认就是开启深度监视的
? ? ? ? // 如果需要针对对象的某属性,那就只指定这个属性即可
? ? ? ? watch(data,(newValue,oldValue) => {
? ? ? ? ? ? // 对于reactive来说,新的可以获取,老的获取不了
? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);
? ? ? ? ? ? // newValue可以获取,但是old获取不了
? ? ? ? },{immediate:true});
? ? ? ? // 如果我们只需要侦听一个属性,我们就写一个函数,只侦听那一个属性即可
? ? ? ? // 因为我们最后获取的是一个基本数据类型的值,所以不能直接指向它,必须是以函数的形式返回
? ? ? ? // 除非那个是一个响应式的对象
? ? ? ? watch(()=>{return data.counter},(newValue,oldValue) => {
? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);
? ? ? ? },{immediate:true});
? ? ? ? watch(()=>data.a.b.c.d.counter1,(newValue,oldValue)=>{
? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);
? ? ? ? },{immediate:true});
? ? ? ? // 监听数组的方式
? ? ? ? watch([()=>data.counter,()=>data.a.b.c.d.counter1],(newValue,oldValue)=>{
? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);
? ? ? ? },{immediate:true});
? ? ? ? // 这个还是oldValue获取不了,但是可以使用深度监视效果了
? ? ? ? watch(()=>data.a.b,(newValue,oldValue)=>{
? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue+"哈哈哈哈");
? ? ? ? },{immediate:true,deep:true});
? ? ? ? return {data};
? ? }
}
</script>
<style>
</style>
import mitt from 'mitt'; // 这个会创建一个对象emitter // 把它当作全局事件总线对象即可 export default mitt();
import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();