Vue3.0 watch监听事件

这是我在csdn发布的博客，暂时还没有同步过来！

选项式：http://t.csdn.cn/4okzo

组合式：http://t.csdn.cn/oErmR

1. watch 函数参数解释

watch(data, (newData, oldData) => {}, (immediate:true, deep:true))
// data 监听数据
// 副作用函数
// 配置对象

2.示例

watch([person_data, animal_data], (newValue, OldValue)=>{
   // 返回的是数组类型

}
)

• 监听一个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 //立即监听
})