Vue3.0 watch监听事件

简介: Vue3.0 watch监听事件

Vue3.0 watch监听事件

  • 监听一个reactive定义的数据
const state = reactive({count:1})
watch(() => state.count,(newCount,oldCount) =>{
    console.log(newCount,'新数据源')
    console.log(oldCount,'老数据源')
})
  • 监听一个ref值
const num = ref(0)
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 //立即监听
})
目录
相关文章
|
1月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
1027 2
|
6月前
|
存储 缓存 JavaScript
Vue3.0监听器watch与watchEffect
Vue3.0监听器watch与watchEffect
100 6
|
6月前
|
JavaScript
Vue 监听属性 watchEffect
Vue 监听属性 watchEffect
【Vue3】回顾watch,学习watchEffect
【Vue3】回顾watch,学习watchEffect
|
6月前
|
JavaScript
Vue3的watch使用介绍及场景
Vue3的watch使用介绍及场景
306 0
vue3中watch监听不是你想的那样简单
vue3中watch监听不是你想的那样简单
|
6月前
|
API
Vue3之watch和watchEffect实战总结
Vue3之watch和watchEffect实战总结
248 0
Vue3.0 watch监听事件
Vue3.0 watch监听事件
354 1