Vue3.0 watch监听事件

简介: Vue3.0 watch监听事件

-最近在使用vue3.0编写项目,watch这个事件和2.0使用方式还是有一些差距,记录一下,便于以后学习

const state = reactive({count:1})

监听一个reactive定义的数据
watch(() => state.count,(newCount,oldCount) =>{
    console.log(newCount,'新数据源')
    console.log(oldCount,'老数据源')
})

const num = ref(0)
监听一个ref
watch(num,(newNum,oldNew) =>{
    console.log(newNum,'新数据源')
    console.log(oldNew,'老数据源')
})

监听多个数据源
const state = reactive({count:1})
const num = ref(0)
watch([()=> state.count,num],([newCount,newNum],[oldCount,newOld])=>{
    console.log('new:',newCount,newNum);
    console.log('old:',oldCount,oldNum);
})

监听复杂对象
const state = reactive({
  person: {
    name: '张三',
    fav: ['帅哥','美女','音乐']
  },
});

watch(() => state.person,(newPerson,oldPerson) =>{
    console.log("新值:", newType, "老值:", oldType);
},{
    deep:true //立即监听
})
目录
相关文章
|
2月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
1600 2
|
7月前
|
存储 缓存 JavaScript
Vue3.0监听器watch与watchEffect
Vue3.0监听器watch与watchEffect
115 6
|
JavaScript
Vue中watch的简单应用
Vue中watch的简单应用
57 0
【Vue3】回顾watch,学习watchEffect
【Vue3】回顾watch,学习watchEffect
|
7月前
|
JavaScript
Vue3的watch使用介绍及场景
Vue3的watch使用介绍及场景
339 0
vue3中watch监听不是你想的那样简单
vue3中watch监听不是你想的那样简单
|
7月前
|
JavaScript
Vue watch详解
当我们在Vue.js中使用watch选项来监听属性时,Vue.js会在内部使用了一个叫做Watcher的类来实现。Watcher类是Vue.js响应式系统的核心之一,它负责建立依赖关系并在依赖发生变化时执行回调函数。 具体来说,当我们使用watch选项定义一个属性的监听器时,Vue.js会创建一个Watcher实例,并将该实例与当前组件实例、属性名以及回调函数进行关联。Watcher实例会负责追踪所监听的属性,并在属性发生变化时触发回调函数。
102 0
|
7月前
|
API
Vue3之watch和watchEffect实战总结
Vue3之watch和watchEffect实战总结
271 0
【Vue3】vue3 中 watch 和 watchEffect 的区别
【Vue3】vue3 中 watch 和 watchEffect 的区别
136 0