一起学Vuejs（十八）----- watch属性

不积跬步，无以至千里；不积小流，无以成江海。

Vuejs语言基础

watch属性（监听）：

监控vue实例的变化，监控的变量或者对象必须在data里面声明才可以。

基本用法：

当fullName值变化时，watch监听到并且执行：

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

handler方法和immediate属性

上面方法中使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行；

如果我们需要在最初绑定值的时候也执行函数，则就需要用到 immediate 属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

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

deep属性

深度监听，常用于对象下面属性的改变；

普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

博客借鉴：https://www.jianshu.com/p/b70f1668d08f

https://www.cnblogs.com/shiningly/p/9471067.html

posted on 2020-10-24 21:49 smile学子阅读(168) 评论(0) 收藏举报