×
  • Web前端首页
  • VueJs
  • vue每日一学:了解监视(侦听)属性watch和computed以及它们之间的区别

vue每日一学:了解监视(侦听)属性watch和computed以及它们之间的区别

作者:Web前端之家2021.10.19来源:Web前端之家浏览:286评论:0
关键词:vuejswatchcomputed
微信公众号

微信公众号

vue每日一学:了解监视(侦听)属性。众所周知,在vue中,使用监听属性,一般是两种:watch和computed。今天我们来一起学习watch监听属性,以及它跟computed的区别。

Watch监听:

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

监视的属性必须存在,才能进行监视!!

...
// 写法1. 传入watch配置 侦听ishot属性
      
watch:{
          isHot:{
              immediate:true, //初始化时让handler调用一下
              
              //handler什么时候调用?当isHot发生改变时。
              
              handler(newValue,oldValue){
                  console.log('isHot被修改了',newValue,oldValue)
              }
          }
      }
})
  
  
// 写法2. 通过vm.$watch监视
vm.$watch('isHot',{
   immediate:true, //初始化时让handler调用一下,默认是false
   //handler什么时候调用?当isHot发生改变时。
   handler(newValue,oldValue){ // 有两个参数,一个是新值,一个是旧值
   	console.log('isHot被修改了',newValue,oldValue)
   }
})

2. 深度监视

深度监视:

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

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

备注:

  • 1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!

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

data:{
	isHot:true,
	numbers:{
		a:1,
		b:1
	}
},
watch:{
	// 监视多级结构中某个属性的变化(原始写法是要加引号的,简写可以不加,但这种情况要加,否则报错)
	/* 'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} */
	//监视多级结构中所有属性的变化
	numbers:{
		deep:true, // 如果不开启这个,那监测的就是numbers的地址是否有变化
		handler(){
			console.log('numbers改变了')
		}
	}
}

监视属性-简写

当监视属性中只有handler()而不需要开启其他配置项时才能简写

watch:{
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}
}

/* vm.$watch('isHot',function (newValue,oldValue) {
	console.log('isHot被修改了',newValue,oldValue,this)
}) */

3. computed和watch区别和原则

computed和watch之间的区别

  • computed能完成的功能,watch都可以完成。

  • watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则

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

  • 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。

watch:{
	firstName(val){
		setTimeout(()=>{
			console.log(this) //vue实例对象,若用普通函数则返回Window
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	lastName(val){
		this.fullName = this.firstName + '-' + val
	}
}

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20211019a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1