watch是一个监听器,当数据发生变化时通过watch监听数据变化并做一些操作。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

例子:

 watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      console.log(newQuestion, oldQuestion)//watch里的函数有两个参数,数据变化后的值和变化前的值
    }
  },
  • 当watch监听对象或数组时可以加一个深度监听的属性deep
watch: {

    obj:{
        handler(new_value,old_value){
            console.log(new_value,old_value)
        }
    },
    deep: true
}

注意:如果直接改变一个值是无法触发watch的,比如:

obj['a']=2

此时需要加个Vue.$set:

this.$set(tobj,'a',2)
  • watch还有一个特点,在数据第一次绑定的时候不会监听改数据,只有发生改变是才会执行watch里对应的函数,那这时我们需要最初绑定时有执行该函数就需要使用immediate属性了。详细见这里
data(){
  return{
    demo:""
  }
}
watch: {
      demo(val) {
        handler(newName, oldName) {
         console.log(newName)
          console.log(oldName)
      },<details>

      immediate: true
      }
    }

posted on 2021-09-29 10:48  秃头大宝贝  阅读(445)  评论(0)    收藏  举报