Vue watch 侦听对象属性详解

1. Vue watch 概述

Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。

• 方法格式的侦听器只能监听简单数据类型，如：Number、String、… 无法监听对象属性的变化，也不能在进入页面时，自动触发；
• 对象格式的侦听器可以监听对象属性的变化。在一定条件下，载入页面时，也可监听数据变化；

2. Vue 对象的监听方法

1.键名分割，监听对象的某一个属性变化；
属性名通过 . 与对象分割，并通过引号包裹，可以监听对象的某一个属性

data() {
	return {
		obj:{
			name:'andy',
			age:18
}}},

watch:{
	'obj.name'(newval.oldval) { 
		// 代码实现
	}
}

2.computed + watch，监听对象的某一个属性变化；

computed:{
     ageVal() {
           return this.obj.age;
     }
}
 watch:{
     ageVal(newval,oldval) {
           // 代码实现
     }
}

3.deep 深度监听，监听对象的所有属性变化；

• deep：true 开启深度监听，任意属性的属性值变化，都会触发 deep 深度监听；
• deep 深度监听只能获取到最新值；
• 不推荐 deep 深度监听，容易造成页面卡顿，因为deep 深度侦听需要遍历被侦听对象中的所有嵌套的属性；

obj:{
      handler(val) {
           // 代码实现   val 值是 obj 整个对象
      },
      deep:true // deep 为 true 时，开启深度监听
      // immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
}

到此这篇关于Vue watch 侦听对象属性的文章就介绍到这了,更多相关Vue watch 侦听对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！