vue监听属性watch中的handler

Posted 2021-09-01 晚星@

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,最初绑定的时候是不会执行的