当前位置：首页 > article >正文

vue学习记录七：监听属性watch

article 2024/12/25 9:41:53

vue学习记录七：监听属性

一、写法
- 1.函数写法
- 2.对象写法
- 3、监听data里一个对象的属性
- 4.created和mounted修改值时，wathc如何触发

一、写法

1.函数写法

<input v-model='firstName'>
data:{
 firstName:'你好'
}
watch:{
firstName:function(oldval,newval){
   //当firstName发生变化时就会触发这个方法，newval表示变化后的值，
}

2.对象写法

 watch: {
          firstName: {
            immediate: true, //立即执行
            handler(newValue, oldValue) {
        //可以使用this
            },
          },
        }

当firstName发生了变化后，就会执行handler这个函数，同时用于加上了immediate属性，并且该属性的值为true，表示的就是在初始化绑定的时候，也会去执行侦听器。因为watch在初始化绑定的时候是不会执行的，等到所监听的内容改变之后才会去侦听执行。

3、监听data里一个对象的属性

watch:{
'form.name':function(oldval,newval){
   //当form.name发生变化时就会触发这个方法，newval表示变化后的值，
}

4.created和mounted修改值时，wathc如何触发

 data () {
    return {
      name: ''
    }
  },
  created () {
    this.name = '小'
  },
  mounted () {
     this.name = '飞'
  },
  watch: {
    name: function () {
      console.log(this.name)
    }
  }
//都会触发