vue中watch的用法

vue中watch的用法

在平时工作中经常会遇到需要对某些数据进行监听，根据数据的变化来执行某些操作，这个时候我们可以用到vue中的监听器watch,下面我们一起来看一下watch的具体用法

new Vue({
  el: '#root',
  data: {
    name: 'zhangsan'
  },
  watch: {
    name(newName, oldName) {
      // ...
    }
  } 
})

newName和oldName分别对应name的新值和旧值，在函数中，可以对新旧值进行判断来执行指定操作

watch的immediate和deep属性

使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

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

new Vue({
  el: '#root',
  data: {
    name: 'zhangsan'
  },
  watch: {
    name： {
    handler(newVal){},
      immediate:true
    }
  } 
})

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

new Vue({
  el: '#root',
  data: {
    people:{name:'zhangsan'} 
  },
  watch: {
    people: {
    handler(newVal,oldVal){},
      immediate:true,
      deep:true
    }
  } 
})

当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

// An highlighted block
new Vue({
  el: '#root',
  data: {
    people:{name:'zhangsan'} 
  },
  watch: {
    'people.name': {
    handler(newVal){},
      immediate:true,
      deep:true
    }
  } 
})