handle:watch中需要具体执行的方法
deep:需要监听的数据的深度,一般用来监听对象中某个属性的变化,数组字符串一般不需要
immediate:在选项参数中指定 immediate: true将立即以表达式的当前值触发回调

 <input type="text" v-model="cityName.name"/>
new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。 当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName,最初绑定的时候是不会执行的

Logo

前往低代码交流专区

更多推荐