简述：vue中的watch属性大家都比熟悉，是vue的监听属性，监听数据的变化触发执行函数，可以监听数据和路由，这里给大家总结了一下watch在vue2和vue3中的使用详细，顺便做个笔录；
watch的相关属性：
1、handler(newVal, oldVal) {} ,
译：回调函数，变化时触发，有两个参数，一个是新值，一个是旧值；
2、immediate: true,
译：立即监听，开启时，页面加载时，默认执行一次；
3、deep: true,
译：深度监听，当监听的数据嵌套层级较深时，开启深度监听；
vue2
data () {return {msg:'测试数据',obj:{a:1}}},//监听数据watch:{msg( newVal , oldVal ){ //普通函数式监听console.log( newVal , oldVal )},msg:{handler(newVal , oldVal){ //对象式监听，立即监听console.log( newVal , oldVal )},immediate:true, //立即监听},obj:{handler(newVal , oldVal){ //对象式监听，立即监听，深度监听console.log( newVal , oldVal )},immediate:true, //立即监听deep:true, //深度监听}}
vue3
export default{setup(){let msg = ref('测试数据');let str = ref('测试数据str');let obj = reactive({a:1,arr:['a','b','c']})//初始化监听watch( msg , (newVal,oldVal)=>{console.log( newVal,oldVal )})//初始化监听，开启立即监听watch( msg , (newVal,oldVal)=>{console.log( newVal,oldVal )},{immediate:true, //初始化立即监听 })//同时监听多个数据，监听的数据写成数组形式watch([msg,str],(newVal,oldVal)=>{console.log( newVal,oldVal )},{immediate:true, //初始化立即监听 })//监听对象中的某个对象时（适用于嵌套层级较深时使用，注意是箭头函数）watch( ()=>obj.arr , (newVal,oldVal)=>{console.log( newVal,oldVal )})//监听多个数据和深层对象时，同样watch([msg,str,()=>obj.arr], (newVal,oldVal)=>{console.log( newVal,oldVal )})//立即监听函数，监听多个数据时，我想知道哪个数据最先改变时使用watchEffect(()=>{console.log( msg.value )})return {msg,str,obj}}}
vue3语法糖（setup）：
<script setup>//操作类型let msg = ref('测试数据');watch( msg , (newVal,oldVal)=>{console.log( newVal,oldVal )},{immediate:true})</script>
监听路由：
watch:{$route:{handler(newval,oldval){console.log(newval);//新路由信息console.log(oldval);//老路由信息},immediate: true, //初始化监听，默认执行一次deep: true, //深度监听}}
感觉有用，就一键三连，感谢(●'◡'●)
如果觉得《vue中的watch监听属性 使用详细（vue2和vue3监听属性watch的使用）》对你有帮助，请点赞、收藏，并留下你的观点哦！
