广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue的watch是做什么的
  • 406

0
分享到

vue的watch是做什么的

Vuewatch 2023-05-14 21:05:00 406人浏览 安东尼
摘要

本教程操作环境：windows7系统、vue3版，DELL G3电脑。watch是用来做什么的？Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。wat

vue的watch是做什么的

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

watch是用来做什么的？

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch是什么？

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。文档传送

示例：

<template>
	<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
 
<script>
export default {
	data() {
		return {
			name: '123'
		};
	}
};
</script>
 
<style></style>

watch的使用方法

第一种：常规用法

（1）把要监听的name值看作方法名，来进行监听。【第一种写法】

<template>
	<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: '123'
		};
	},
	watch: {
		name(newVal, oldVal) {
			console.log('newVal', newVal);// 1234
			console.log('oldVal', oldVal);// 123
		}
	}
};
</script>

<style></style>

1.png

（2）把要监听的name值看作对象，利用hanler方法来进行监听。【第二种写法】

<template>
	<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: '123'
		};
	},
	watch: {
		name:{
			handler(newVal,oldVal){
				console.log('newVal',newVal); // 1234
				console.log('oldVal',oldVal); // 123
			}
		}
	}
};
</script>

<style></style>

以上两种写法是watch监听器的普通用法，这种用法有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有当值发生改变时才会执行。如果我们需要在最初绑定值的时侯，也执行监听函数，则就需要用到immediate属性。

下面，我们就往高级一点的用法上讲。

第二种：高级用法

比如，当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate属性设置为true，结合handler方法使用。

当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；

当设置immediate属性为false时，常规用法，只有值发生改变才会监听。

<template>
	<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: '123'
		};
	},
	watch: {
		name: {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			},
			immediate: true
		}
	}
};
</script>

<style></style>

立即执行：

2.png

值改变时：

3.png

第三种：超高级用法（deep 深度监听）

（1）监听普通变量的变化可以使用以上两种方法，但是要监听变量值是某对象的时候，则不起作用。

例如，我们监听fORM对象内部属性的变化，是监听不到的。

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '123'
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			}
		}
	}
};
</script>

<style></style>

4.png

则，从结果来看，我们没有看到任何的输出打印，所以普通的watch方法无法监听到对象内部属性的变化。

那么，我们该怎么办才能监听到对象内部属性的变化呢？

watch方法提供了一个deep属性（深度监听），该属性可以监听到对象内部属性的改变。

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '123'
			}
		};
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			},
			deep: true
		}
	}
};
</script>

<style></style>

5.png

设置deep: true 则可以监听到form的变化，如果form有较多属性的话，此时会给form的所有属性都会加上这个监听器，每个属性值的变化都会执行handler。

当deep属性值为true时，就可以监听到对象属性内部的改变；

当deep属性值为false时，则监听不到。

（2）如果只需要监听对象中的某一个属性值时，我们可以使用：字符串的形式监听对象属性，

这个监听过程，不需要使用deep去深度监听，就可以监听对象中某个属性的变化。

<template>
	<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '123'
			}
		};
	},
	watch: {
		'form.name': {
			handler(newVal, oldVal) {
				console.log('newVal', newVal);
				console.log('oldVal', oldVal);
			}
		}
	}
};
</script>

<style></style>

6.png

第四种：扩展（监听数组）

（1）（一维、多维）数组的变化不需要深度监听

<template>
	<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: '123',
			arr1: [1, 2, 3],
			arr2: [1, 2, 3, [4, 5]]
		};
	},
	watch: {
		arr1(newVal, oldVal) {
			console.log('newVal1', newVal);
			console.log('oldVal1', oldVal);
		},
		arr2(newVal, oldVal) {
			console.log('newVal2', newVal);
			console.log('oldVal2', oldVal);
		}
	},
	methods: {
		inputFn(e) {
			this.arr1.push(e);
			this.arr2.push(e);
		}
	}
};
</script>

<style></style>

7.png

（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。

<template>
	<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>

<script>
export default {
	data() {
		return {
			name: '123',
			arr1: [
				{
					id: 1,
					sex: 11
				}
			],
			arr2: [
				{
					id: 2,
					sex: 22,
					list: [
						{
							id: 3,
							sex: 33
						}
					]
				}
			]
		};
	},
	watch: {
		arr1: {
			handler(newVal, oldVal) {
				console.log('newVal1', newVal);
				console.log('oldVal1', oldVal);
			},
			deep: true
		},
		arr2: {
			handler(newVal, oldVal) {
				console.log('newVal2', newVal);
				console.log('oldVal2', oldVal);
			},
			deep: true
		}
	},
	methods: {
		inputFn(e) {
			this.arr1[0].sex = e;
			this.arr2[0].list[0].sex = e;
		}
	}
};
</script>

<style></style>

8.png

9.png

10.png

（学习视频分享：WEB前端开发、编程基础视频）

以上就是vue的watch是做什么的的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue的watch是做什么的

本文链接: https://www.lsjlt.com/news/205738.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • vue的watch是做什么的
    本教程操作环境：windows7系统、vue3版，DELL G3电脑。watch是用来做什么的？Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。wat...
    99+
    2023-05-14
    Vue watch
  • Vue中的watch、watch和computed的区别是什么
    本文小编为大家详细介绍“Vue中的watch、watch和computed的区别是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue中的watch、watch和computed的区别是什么”文章能帮助大家解决疑惑，下面跟着小编的思路...
    99+
    2023-07-02
  • Vue中的watch是什么以及watch和computed的区别
    目录一、watch是什么？二、应用基本用法三、Watch和computed的区别computed和watch的综合运用实例需求：实现代码（helloworld.vue实现代码）一、w...
    99+
    2022-11-13
  • vue的watch是什么及怎么使用
    本篇内容介绍了“vue的watch是什么及怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在vue中，watch用于监听data里面的...
    99+
    2023-07-04
  • Vue中的computed和watch的区别是什么
    Vue中的computed和watch的区别是什么，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。下面带大家认识Vue中的computed 和 watch，介绍一下compu...
    99+
    2023-06-22
  • Vue中Computed和Watch的作用是什么
    本篇文章给大家分享的是有关Vue中Computed和Watch的作用是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。 Vue中的...
    99+
    2022-10-19
  • vue中watch是什么属性
    本教程操作环境：windows7系统、vue3版，DELL G3电脑。vue监视属性在开发中，我们会遇到这样一种情况，我们需要一个属性变化的时候，然后做出一些操作。而检测这个变化的属性，在vue中叫做监视属性。1.监视属性是什么在vue中，...
    99+
    2023-05-14
    watch Vue
  • vue组件中watch属性的作用是什么
    本篇文章为大家展示了vue组件中watch属性的作用是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。具体内容如下<!doctype html&g...
    99+
    2022-10-19
  • vue中watch的立即监听和深度监听是什么
    小编给大家分享一下vue中watch的立即监听和深度监听是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！watch 的立即监...
    99+
    2022-10-19
  • Vue3中watch的用法是什么
    本篇内容主要讲解“Vue3中watch的用法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3中watch的用法是什么”吧!目录前言一、API介绍二、监听多个数据源三、侦听数组四、侦听...
    99+
    2023-06-20
  • Vue中的Computed与watch怎么用
    这篇“Vue中的Computed与watch怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的Computed与...
    99+
    2023-06-30
  • Vue的$watch方法怎么使用
    这篇文章主要介绍了Vue的$watch方法怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue的$watch方法怎么使用文章都会有所收获，下面我们一起来看看吧。代码如下：// 键路径vm.$w...
    99+
    2023-07-04
  • vue的watch属性怎么使用
    这篇文章主要介绍“vue的watch属性怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue的watch属性怎么使用”文章能帮助大家解决问题。watch是监视属性。在vue中，可以通过wat...
    99+
    2023-07-04
  • vue中computed 和 watch有什么区别
    vue中computed 和 watch有什么区别，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。一、computed 和 wa...
    99+
    2022-10-19
  • Vue.js中$watch方法的作用是什么
    Vue.js中$watch方法的作用是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。// 键路径 vm.$watch('...
    99+
    2022-10-19
  • 传说中VUE的语法糖到底是做什么的
    目录一、什么是语法糖？二、VUE中语法糖有哪些？1、最常见的语法糖 v-model2、v-bind 的语法糖3、v-on 的语法糖4、修饰符5、动态css6、注册组件语法糖一、什么是...
    99+
    2022-11-12
  • vue中watch和computed能监听到数据改变的原因是什么
    这篇文章主要为大家展示了“vue中watch和computed能监听到数据改变的原因是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中watch和co...
    99+
    2022-10-19
  • 怎么使用Vue的watch侦听器
    小编给大家分享一下怎么使用Vue的watch侦听器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！侦听器watch 函数名就是要侦听的元素的名字传入的参数第一个是变化后的新值newval，第二个是变化前的旧值old...
    99+
    2023-06-22
  • eval是做什么的
    一、什么是eval eval()函数可以将传入的字符串当作JavaScript代码进行执行。例如，如果你有一个字符串”3 + 2″，你可以使用eval()函数来执行这个字符串，并得到结果5。eval()函数的返...
    99+
    2023-10-29
    做什么 eval
  • java是做什么的
    java是做什么的？java就是计算机编程语言Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言...
    99+
    2017-03-06
    java入门 java
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作