Vue中侦听器watch的基本使用

最新推荐文章于 2024-04-27 16:04:53 发布

张小囧！冲呀！

最新推荐文章于 2024-04-27 16:04:53 发布

阅读量824

点赞数 1

分类专栏： vue 文章标签： vue javascript js vue.js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106032286

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

侦听实际上就是侦听组件中数据属性的变化。一般来说，侦听划分为简单侦听和深度侦听。对基本数据类型的侦听我们只需要使用简单侦听即可，而对复杂数据类型诸如对象数组的侦听，我们需要使用深度侦听。侦听时我们使用watch作为组件定义时的一个option。
1.基本数据类型之简单侦听基本用法

	watch:{
    	msg:function(newV,oldV) {
    	    // 相关操作
    	}
    }

2.复杂数据类型之深度侦听用法基本用法

	watch:{
    	arr:{
           deep:true,
           handler:function(newV,oldV) {
    	      // 相关操作
    	   }
        }
    }

3.侦听器使用之详细代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>监听器的使用</title>
	</head>

	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript'>
			var vm = new Vue({
				el:'#app',
				data:function() {
					return {
						msg1:'Come On',    //字符串类型在input中使用
						msg2:[{name:'张三'}]    //对象类型，点击按钮后进行更改
					}
				},

				// 下面的input需要使用双向数据绑定v-model这样才能真正的修改msg1，所以才能监听；对于msg2也是因为实实在在的改变这一数据属性，所以才得以监听到
				template:`
					<div>
						<input type='text' v-model='msg1'/><br/>
						<p>我msg2:{{msg2}}</p>
						<button @click='modifyMsg2'>点我</button>
					</div>
				`,
				methods:{
					modifyMsg2: function(e) {
						this.msg2[0].name = '李四'
					}
				},
				watch:{
					// 针对msg1修改后的监听是简单监听
					msg1:function(newV,oldV) {
						console.log('我监听了msg1这一简单数据类型的最新值为：'+newV)
					},

					// 针对msg2这类对象的监听是复杂监听
					msg2:{
						deep: true,
						handler:function(newV,oldV) {
							console.log('通过侦听得到msg2这一复杂数据类型的最新值:'+newV[0].name)
						}
					}
				}
			})
		</script>
	</body>
</html>

结果：
数据修改之前----
在这里插入图片描述
修改input中的内容后----

修改msg2这一对象数组(因为modifyMsg2方法中修改的是msg2数组中对象中的一个具体的值，为了让这一具体值变化的也能被侦听，所以必须对msg2使用深度侦听)----

张小囧！冲呀！

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue中侦听器watch的基本使用

侦听实际上就是侦听组件中数据属性的变化。一般来说，侦听划分为简单侦听和深度侦听。对基本数据类型的侦听我们只需要使用简单侦听即可，而对复杂数据类型诸如对象数组的侦听，我们需要使用深度侦听。侦听时我们使用watch作为组件定义时的一个option。 1.基本数据类型之简单侦听基本用法 watch:{ msg:function(newV,oldV) { // 相关操作 } } 2.复杂数据类型之深度侦听用法基本用法 watch:{ arr:{
复制链接

扫一扫