Vue之监视属性

最新推荐文章于 2024-10-17 18:17:22 发布
最新推荐文章于 2024-10-17 18:17:22 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： # vue 文章标签： vue.js javascript 前端
原文链接：https://blog.csdn.net/zyb18507175502/article/details/125123475
版权

目录

一、案例引入

 二、监视属性

三、深度监视

四、监视的简写形式

五、watch对比computed

一、案例引入

我们实现以下的一个小案例：
在这里插入图片描述

 

点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。

我们先不考虑控制台的那一部分，先把切换部分给做出来。

我们可以使用前文刚刚介绍的计算属性。第一部分实现代码如下：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>

此处有两个注意点：
①如果我们把上述代码模板中的插值语法给去掉，也就是这样：

在这里插入图片描述

因为此时已有属性、计算属性在模板当中都没有使用，故会导致Vue的开发者工具出现一点小问题。
我们发现，点击了切换按钮之后，开发者面板中的属性值并没有发生变化：

在这里插入图片描述 

事实是：数据已经更新了，但是开发者面板中没有更新，我们可以验证一下：

在这里插入图片描述 ②一个小技巧
@click后面可以写一些简单的语句(就是你回调函数里面的语句)，例如上面的代码我们还可以这样写：

在这里插入图片描述

同样也可以进行多项操作(理论上回调函数里面所有的语句都可以写在里面)： 

 在这里插入图片描述

效果：

在这里插入图片描述 

不过这么写容易乱套，建议逻辑简单的时候可以使用这种技巧，如果复杂还是中规中矩的写回调函数。
同时这个方法还有一个注意点：不是所有的语句都可以执行的。例如：

在这里插入图片描述 

报错：

在这里插入图片描述 

因为alert是window身上的方法，而模板之中把对象给写死了就是vm，不会说找不到再去外头一层找(但会再去vm的原型对象上继续找，当然肯定是找不到的)。故这里alert是不能用的。
当然这种情况你非要解决也是有办法的(可以但没必要)，就是让window可见就行：

在这里插入图片描述 

我们直接将window放在data中，这样在模板中就可见了。 

然后控制台的捕获部分就要使用监视属性了。

 二、监视属性

监视属性顾名思义就是我们要监视的属性。那么我们如何去监视一个属性呢。Vue为我们提供了一个新的配置项watch。我们直接看相关实现代码，再进行解释：

	<body>
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} 
		})
	</script>

watch里面的被监视属性同样也要写成一个配置对象。其中：

  • handler是一个回调函数，当被监视的属性值发生变化的时候就会被调用。它会被传入两个参数：一个新值，一个旧值。
  • immediate是一个布尔属性，默认值是false。当设置为true的时候表示初始化的时候也要调用以下handler

不论是已有的属性还是计算属性都可以被监视

我们也可以不通过watch来进行监视，我们可以直接通过vm实现监视(前提是确保vm实例对象已经被创建完毕)，代码如下：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>

注意：$watch()这个方法的第一个参数是要监视的对象。这个地方是有引号的。我们对象中的属性不写引号是一种简写形式，如果写全的话也是有引号的(因为是字符串类型)。

那么这两种我们如何选择呢？
如果一开始，也就是创建vm实例对象的时候，就已经很明确要监视谁，就可以直接选择watch配置，
如果创建实例的时候不是很明确要检测谁，后续根据用户的行为才能确定。那么就可以选择vm的相应api来监视

小总结：

在这里插入图片描述

 

三、深度监视

我们还是通过一个案例来理解：我们想检测number中的a的变化(b如果发生变化不管)
在这里插入图片描述
网页端：
在这里插入图片描述

也就是说监视多级结构中某个属性的变化,代码实现如下：

在这里插入图片描述
之所以加引号是因为对象里的key必须是字符串，里面直接写.是不可以的，所以我们只能还原原始的写法。

实现效果：

在这里插入图片描述 

现在我们有新的需求，我们想要检测numbers中所有属性的变化(也就是说只要其中一种属性发生了变化就会被监测到)，如果numbers中有很多很多的属性，继续沿用上面的代码的思路显然代码会非常冗长麻烦。这个时候我们就可以使用深度监视！

我们只需要添加一个配置项deep即可。它的默认值是false，以此来保证程序的运行效率。

监视多级结构中所有属性的变化，代码如下：

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>

 小结：
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

四、监视的简写形式

使用前提：当你监视属性的配置项中只有handler的时候才可以使用。

与前文的计算属性的简写方法一致，直接写成一个函数。函数名对应监视的函数名，方法体就是handler的方法体。

代码如下：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})
	</script>

同样的我们也可以使用vm的api进行监视，常规及简写版如下：

		//正常写法
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) 

		//简写
		vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		})

注意：此处不能写箭头函数(Vue管理的函数不能写成箭头函数)

五、watch对比computed

我们发现有时候一个功能可以用这两种方式分别实现。例如我们还是使用前面的一个小案例：有3个input框，姓、名、姓名。当姓和名发生变化的时候，姓名会跟着动态的发生变化。

watch实现：

<body>
    <div id="root">
        姓：<input type="text" v-model:value="firstName"> <br>
        名：<input type="text" v-model:value="lastName"> <br>
        姓名：<input type="text" :value="fullName">
    </div>
    
</body>
<script>
    const vm = new Vue({
        el:"#root", 
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(newValue){
                this.fullName = newValue + '-' + this.lastName
            },
            lastName(newValue){
                this.fullName = this.firstName + '-' + newValue
            },
        }

    })
</script>

 computed实现：

在这里插入图片描述

从这里可以看出使用计算属性的代码是比监听属性更加简洁的。但是这并不是绝对的，有时候我们要实现的功能甚至只有监听属性才能做。

下面我们讲将案例进行修改：我们要求修改之后的变化延迟一秒才生效。

代码实现如下：
使用监视属性实现：

<script>
    const vm = new Vue({
        el:"#root", 
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(newValue){
                setTimeout(() => {
                    this.fullName = newValue + '-' + this.lastName
                }, 1000);
            },
            lastName(newValue){
                setTimeout(() => {
                    this.fullName = this.firstName + '-' + newValue
                }, 1000);
            },
        }

    })
</script>

 使用计算属性是不能完成这个需求的。因为计算属性的变化全靠return，而我们是没有办法实现延迟return的。

如果你用setTimeout函数将return包裹，那么return里的东西返回给了延时函数，而不是计算属性的那个函数，相当于外层函数没有返回值，那么相应的计算属性也不会发生变化

在这里插入图片描述 

所以我们可以知道：
计算属性里面是不能开启异步任务去维护数据的。但是使用监视属性是可以完成的。

当有一个需求，watch能实现computed也能实现，我们一般使用计算属性。但是当我们面临一些异步的计算的时候，我们就要使用watch.

同时还有一个小问题：

 在这里插入图片描述

我们在这个箭头函数里面使用了this，那么它指向的是Vue的实例对象吗？

确实如此。我们可以在此基础上进行总结：

 

  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
爱上口袋的天空
关注
专栏目录
21.Vue的监视属性watch与计算属性computed对比
爱米酱的博客
06-09 503
Vue的监视属性watch与计算属性computed对比
Vue监视属性与深度监视
weixin_71181899的博客
07-14 489
1).Vue自身可以检测对象内部值的改变，但Vue提供的watch不可以。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。(2).使用watch时根据数据具体结构，决定时候采用深度监视。（1）.newVue时传入watch配置。2.监视的属性必须存在，才能进行监视！（2）.通过vm.$watch监视。(1).Vue中的watch默认不检测对象内部值的改变(一层)(2).配置deeptrue可以监测对象内部值改变(多层)1.通过一个点击切换的案例来理解。...
【Vue】监视属性
一个真ikun
10-21 604
本篇介绍了Vue中的监视属性。
vue中的监视属性
weixin_46376652的博客
07-09 2787
如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视 监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；接收两个参数：newValue：表示新的值oldValue：表示改变前的值实现初始化的时候调用一次监视函数handler，默认为false如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性watch:{ "numbers.a":{ ... } } //numb
Vue中watch侦听器（监视器）
最新发布
Java技术加油站的博客
10-17 1022
监视数据变化，执行一些业务逻辑或异步操作语法：watch同样声明在跟data同级的配置项中简单写法： 简单类型数据直接监视完整写法：添加额外配置项data: {words: '苹果',obj: {words: '苹果'},watch: {// 该方法会在数据变化时，触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。},'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。
Vue监视属性
weixin_44992737的博客
05-23 657
答：当监视的属性指向一个容器类型时，如对象、数组等，容器里面的数据改变时能够被监视到则叫做深度监视。不受Vue管理，它由JS引擎异步管理模块进行处理，导致定时器函数timeout()的this永远由浏览器指定为window，所以这个回调函数不能写成普通函数(普通函数的this与定时器一致为window，导致无法读取Vue的数据)。，由于箭头函数没有自身的this指向，他会自动向它所属上一级进行寻找，而他的上一级恰好是Vue的this，所以能够使用Vue的数据，注意：箭头函数和timeout是同一级的。
Vue 监视属性
qq_56303170的博客
10-18 2643
监视属性 写在Vue对象的watch中，它的值是配置对象——即属性名 当被监听的属性改变时，回调函数自动调用，进行相关操作 监视的属性必须存在，才能进行监视 监视的两种写法： new Vue时传入watch配置 通过vm.$watch监视 handler方法 可传递参数：newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值 var vm = new Vue({ el: "#root", data: {
Vue的计算属性与监视属性
qq_43781887的博客
10-24 1070
（2）所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象。这个部分就有问题，你的return返回的值是交给setTimeout的不是fullName，所以根本得不到计算属性的值就无法渲染。（1）所有被Vue管理的函数最好写成普通函数，这样this的执行才是vm或者组件实例对象。（1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。（1）计算属性能完成的功能，监视属性都可以完成。
Vue3监视属性
weixin_48952990的博客
06-04 351
Vue3watch监视属性的几种情况
Vue---监视属性
gaoqiandr的博客
05-10 256
本文主要讲解的是Vue中的监听属性，简单易懂
Vue-Vue的监视属性
Laollaoaolao的博客
08-18 597
1.理解 监视属性watch: 1.当被监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视 3.监视的两种写法: ​ 1.new Vue时传入watch配置 ​ 2.通过vm.$watch监视 格式: watch:{ xxx:{ hander(newValue,oldValue){ xxxxx } } } 2.案例 1.基本属性
Vue中的监视属性
XunLin233的博客
10-11 764
当我们想要监视一个属性改变的时候就可以使用监视属性监视其变化并进行操作。语法格式如下：watch:{监视属性名称 : { // 监视属性的配置项 }
Vue之监视属性（watch）
浩泽学编程的博客
07-09 895
监视属性当被监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能进行监视！监视的两种写法：（1） Vue实例化对象内watch配置（2）通过Vue实例（假设是vm）vm.$watch监视以上就是监视属性。
Vue—监视属性
Guuiabc的博客
01-23 255
(1).vue自身可以路测对象内部值的改变，但vue提供的watch默认不可以！(2).使用watch时根据数据的具体结构。决定是否采用深度监视。(1).vue中的watch默认不监测对象内部值的改变（一层）。(2).配置deep:true可以监测对象内部值改变（多层）。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。(1).new Vue时传入watch配置。2.监视的属性必须存在，才能进行监视！(2).通过vm. $watch监视。*默认不开启深度监视是为了效率更高。
vue3 监视多个属性
03-25
可以使用computed属性方法，它支持对多个依赖属性进行监视，当其中任何一个依赖属性发生变化时，就会重新计算computed属性的值。举个例子： ``` <template> <div> <p>Length: {{ length }}</p> <p>Width: {{ width }}</p> <p>Area: {{ area }}</p> </div> </template> <script> export default { data() { return { length: 3, width: 4, }; }, computed: { area() { return this.length * this.width; }, }, }; </script> ``` 在这个例子中，当length或width发生变化时，area也会重新计算。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值