[JavaScript知识库]vue中watch的使用

watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。

基础用法

<template>
  <div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      alldata:1,
      shipStatusArr{
          name:"张三"
      }
    }
  },
  watch:{
    alldata(newVal,oldVal){
      console.log(newVal,oldVal)
    }
  },
}
</script>

handle、immediate、deep（监听对象时必须用它）

watch: {
    alldata(newVal,oldVal){
      console.log(newVal,oldVal)
    }
}

// handler方法和immediate属性
// 基础用法中是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性
watch: {
  alldata: {
    handler(newName, oldName) {
      console.log(newVal,oldVal)
    },
    // 代表在wacth里声明了a这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true,
    deep: true   // 深度监听父组件传过来对象变化
  }
}

监听对象的某一个属性

watch: {
    'shipStatusArr.name': function (newValue, oldVal) {
        console.log( newValue, oldVal )
    }
}

设置deep: true 则可以监听到shipStatusArr.name的变化，此时会给shipStatusArr的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性。
这样只会给对象的某个特定的属性加监听器。