Vue Watch --笔记

用来监听单一数据，仅在数据发生变化时候才执行

• data内部的数据，
• 父组件传来props中的数据
• 监听路由router

//语法
watch: {
    key1: function(newVal, oldVal) {
        console.log(newVal, oldVal)
    },
    key2:{
        handler: function(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true  //深度监听，用于当监听变量是一个对象时候使用
    }
}

• demo

<template>
  <div class="parent">
    {{msg}}
    <div>
    	<input type="text" v-model="obj1.user">
    </div>
  </div>
</template>

<script>

export default {
  name: 'parent',
  data() {
    return {
      msg: 'hello!',
      obj1: {
          user: '小虎'
      }
    }
  },
  methods: {
  },
  watch: {
      msg: function (newVal, oldVal) {
          console.log(newVal, oldVal)
      },
      obj1: {
          handler: function(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true  //深度监听，用于当监听变量是一个对象时候使用
      },
      '$router.path'(newVal, oldVal) {
          console.log(newVal, oldVal)  //可用于监听路由
      }
  }
}
</script>