VUE 中watch(监听)的使用

监听的用法和VUE2中没有区别，只不过VUE3中可以写多个watch，避免了多个监听时引入计算属性computed的操作

VUE3中用法

<template>
	<div class="test">
		 <input type="text" v-model="table_data.test" />
		 <input type="text" v-model="test_data" />
	</div>
</template>

<script>
	import {ref,reactive,onMounted,watch} from 'vue'
	export default{
		name:'test',
		setup(){
			let table_data = reactive({
				test:'123'
			})
			let test_data = ref('4556');
			//监听reactive的方式，reactive的监听必须放在  return之前，不然不会生效
			watch(
				()=>table_data.test,(newVal,oldVal)=>{
					console.log('table_data.test 发生了变化',newVal,oldVal)
				},
			)
			//监听ref的方式
			watch(
				test_data,(newVal,oldVal)=>{
					console.log('test_data 发生了变化',newVal,oldVal)
				}
			)
			return{
				table_data,
				test_data
			}
		}
	}
</script>

VUE2中用法

因为个人原因，比较喜欢对象格式应用，所以这里例子就写对象格式的

<template>
	<div class="test">
		 <input type="text" v-model="table_data.test" />
		 <input type="text" v-model="test_data" />
	</div>
</template>

<script>
	export default{
		name:'test',
		data(){
			return{
				test:'123'
			}
		},
		watch:{
			//对象格式监听器
			this.test:{//这里的test就是data数据里面的test
			//监听的内容
				hander(newVal,oldVal){
				//监听函数
					console.log('test 发生了变化',newVal,oldVal)
				},
				//deep:true  开启深度监听，可以监听对象
			}
		}
	}
</script>