Vue的监听属性Watch的详解

Posted 2021-11-07 是小橙鸭丶

各位小伙伴今天让我们一起来了解Watch我们这个经常用到它的一些用法，例子

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: '#sina',
  data: {
    firstName: 'Chen',
    lastName: 'Sina',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

当我们看到这个例子的watch时，这是我们最普遍的用法，当firstName变化时，就会触发watch监听，监听每次修改变化的新值，然后fullName进行修改操作。注意：这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行，若你的需求是最初绑定值的时候也执行函数，则就需要用到immediate属性如下

• handler方法和immediate属性

当你父组件向子组件动态传值时，子组件的props首次获取到父组件传过来的默认值，也需要执行此监听函数时，此时就需要immediate改为true

//顺便让你们理解一下props的规范写法
props:{
			goodsData:{
				required: false, //可以使用required选项来声明这个参数是否必须传入。
				type: Array,
				default:()=>[] //数组类型
			},
			batchShow:{
				required:false,
				type:Boolean,
				default:false //布尔类型
			},
            firstName:{
               required:false,
			   type:String,
			   default:''   //String类型
            }
},


watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

注意到handler这个方法了吗，我们给 firstName 绑定了一个handler方法，之前我们的写法是省略写法，现在这个是完整的写法，因为watch 方法其实默认写的就是这个handler方法的。
immediate:true 立即执行---代表我们在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

• deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<input type="text" v-model="goods.price"/>
new Vue({
  el: '#sina',
  data: {
    goods:{
        number:1,
        price:100,    
    }
  },
  watch: {
    goods: {
      handler(newval, oldval) {
      // 进行对应的操作
    },
    deep: true,
    immediate: true
    }
  } 
})

• 设置deep: true 则可以监听到goods.price的变化，但是此时会给goods的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。这样则会对我们的性能增加极大的负担，所以如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

 watch: {
    'goods.price': {
      handler(newval, oldval) {
      // 进行操作
      },
      deep: true,
      immediate: true
    }
  }

这样优化就大大提升了性能，欢迎各位小伙伴有问题多多沟通呀