Vue3 setup中watch监听器的使用

作者：温新

时间：2021-08-22

hi，我是温新，一名PHPer

在setup中，使用监听器需要对其进行导入。watch监听器函数接收3个参数：

• 1、一个想要侦听的响应式或getter函数；
• 2、一个回调；
• 3、可选的配置项

最基础的监听器的使用

<div id="app">
	<input type="text" v-model="webName">
	<p>{{ webName }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {ref, watch} = Vue;
			let webName = ref('自如初');

			// 监听器监听webName的变化
			watch(webName, (newValue, oldValue)=>{
				console.log(newValue, '--', oldValue);
			})

			return {webName}
		}

	});
	const vm = app.mount('#app');
</script>

当webName被改动时，监听器将触发并执行第二个参数（回调函数），它接收两个参数，分别是 newValue(新值)和oldValue(旧值)。

监听对象数据

<div id="app">
	<input type="text" v-model="webName">
	<p>{{ webName }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {reactive, watch, toRefs} = Vue;
			let objData = reactive({webName:'自如初'});

			// 监听对象数据时，第一个参数需要是函数
			watch( () => objData.webName, (newValue, oldValue)=>{
				console.log(newValue, '--', oldValue);
			})

			// 数据解构
			let { webName } = toRefs(objData);

			return {webName}
		}
	});
	const vm = app.mount('#app');
</script>

监听多个数据

<div id="app">
	<input type="text" v-model="webName">
	<p>{{ webName }}</p>
	<input type="text" v-model="webUrl">
	<p>{{ webUrl }}</p>

</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {reactive, watch, toRefs} = Vue;
			let objData = reactive({webName:'自如初', webUrl:'https://www.ziruchu.com'});

			// 监听多个数据时，参数为数组
			watch( [()=>objData.webName,()=>objData.webUrl], ([newValue, oldValue],[preNewVal, preOldVal])=>{
				console.log(newValue, '--', oldValue);
				console.log(preNewVal, '--', preOldVal);
			})

			// 数据解构
			let { webName, webUrl } = toRefs(objData);

			return {webName, webUrl}
		}
	});
	const vm = app.mount('#app');
</script>

watchEffect的使用

1、watchEffect会立即执行；

2、不需要手动传入所需要监听的数据；

3、接收的参数为一个回调函数；

4、只能获取新值，无法获取修改之前的值

<div id="app">
	<input type="text" v-model="webName">
	<p>{{ webName }}</p>
	<input type="text" v-model="webUrl">
	<p>{{ webUrl }}</p>

</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {reactive, watch, watchEffect, toRefs} = Vue;
			let objData = reactive({webName:'自如初', webUrl:'https://www.ziruchu.com'});

			// 监听数据
			watchEffect(() => {
				console.log(objData.webName,'--',objData.webUrl)
			});

			// 数据解构
			let { webName, webUrl } = toRefs(objData);

			return {webName, webUrl}
		}
	});
	const vm = app.mount('#app');
</script>

停止监听

// 监听数据
let stop = watchEffect(() => {
	console.log(objData.webName,'--',objData.webUrl)
	setTimeout(()=>{
		stop();
	},3000);
});

我是温新

每天进步一点，就一点点