watch监听路由、数据变化

1、watch监听路由变化

watch: {
    $route (to, from) {
      if (from.fullPath === '/Organize/attendPer') {
        Object.assign(this.canteenDetailAdd[from.params.id].flowInstanceStepApproveAdd, this.attendPer)
        // 解决视图 不立即更新
        this.canteenDetailAdd.splice(this.canteenDetailAdd.length, 0)
      }
      // 可以通过 watch 路由监听，获取到id  可以解决根据循环生成的数据，携带id进行不同操作
      // console.log(to,from) // 可以看到from 或 to 是一个对象，对象包括：
      // {name: "Organize", meta: {…}, path: "/Organize/attendPer", hash: "", query: {…},?…}
      // params 的详细内容：params:{type: "attendPer", id: 0}
    }
  },

2、watch监听数据变化

<template>
  <div>
    <div>{{numbers}}</div>
    <div @click="change">点击改变numbers</div>

    <div>{{obj.a}}</div>
    <div @click="update">点击改变obj</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      numbers: 0,
      obj: {
        a: 1
      }

    }
  },
  watch: {
    // 方式1：监听一维数据变化，初始加载不会立即监听
    // numbers () {
    //   console.log(this.numbers)
    // }
    // 方式2 ：
    // numbers: {
    //   handler () {
    //     console.log(this.numbers)
    //   },
    //   // 使用immediate 会在初绑定就进行监听
    //   immediate: true
    // }

    // 监听二维数据变化
    // 方法1： 这样只有obj里面的任何一个数据发生变化，都会被监听，根据需要使用，否则消耗性能
    // obj: {
    //   handler () {
    //     console.log(this.obj.a, 88)
    //   },
    //   // 需要深度监听
    //   deep: true
    // }

    // 方法2：根据需求，监听对象属性
    'obj.a': {
      handler () {
        console.log(this.obj.a, 88)
      },
      depp: true, // 深度监听
      immediate: true // 初次绑定进行监听
    }

  },
  methods: {
    change () {
      this.numbers++
    },
    update () {
      this.obj.a++
      console.log(this.obj.a)
    }
  }
}
</script>