Vue侦听属性

最新推荐文章于 2021-11-24 16:58:15 发布

李公子丶

最新推荐文章于 2021-11-24 16:58:15 发布

阅读量381

点赞数

分类专栏： Vue2学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_54527592/article/details/119153093

版权

Vue2学习笔记专栏收录该内容

48 篇文章 16 订阅

订阅专栏

在最新的vue文档中监视属性更名为侦听属性

侦听属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前数值为：{{number}}</h2>
			<button @click="changeNumber">number++</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				number: 1
			},
			methods: {
				changeNumber(){
					this.number++
				}
			},
            // 第一种写法 new Vue时传入watch配置
			// watch:{
			// 	number:{
			// 		//handler什么时候调用？当number发生改变时。
			// 		handler(newValue,oldValue){
			// 			console.log('number被修改了',newValue,oldValue)
			// 		}
			// 	}
			// }
		})
        
        // 第二种写法 通过vm.$watch监视
        vm.$watch('number', {
            immediate:true, //初始化时让handler调用一下
            function (newValue,oldValue) {
                console.log('number被修改了', newValue,oldValue)
            }
        })
	</script>
</html>

在配置对象的方法里面有两个参数 newValue, oldValue

newValue 属性被修改之后的值

oldValue 属性被修改之前的值

在配置对象中还有一个配置项：immediate:true

初始化时让handler调用一下

深度监视

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			watch:{
				isHot:{
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了' + this.numbers)
					}
				}
			}
		})

	</script>
</html>

只要监听的对象内部的值发生了改变都会触发watch种监视当当前属性的函数

监视属性简写

watch属性监听配置项在不考虑 deep:true 和 immediate:true 配置项的时候可以使用简写的形式

在vm.watch对象中的写法

// new Vue时传入watch配置对象中的简写形式
	watch:{
		number (newValue,oldValue) {
			console.log('number被修改了',newValue,oldValue)
		}
	}

在vm.$watch方法中的写法

// 第二种写法 通过vm.$watch监视
        vm.$watch('number', function (newValue, oldValue) {
			console.log('number被修改了', newValue, oldValue)
        })

通过函数的方式实现简写

注意：函数不要写成箭头函数（箭头函数内的this会指向window）代码会报错

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

这样this的指向才是vm 或组件实例对象。

李公子丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue侦听属性

在最新的vue文档中监视属性更名为侦听属性侦听属性watch：1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在，才能进行监视！3.监视的两种写法：(1).newVue时传入watch配置(2).通过vm.$watch...
复制链接

扫一扫