vue 监听对象属性变化

今天看文章 遇到了这个问题，就用代码验证下，亲测有效。

<template>
  <div id="app">
      <span>
        {{ msg }}
      </span>
      <p>{{ person.name}}年龄是{{ person.age }}岁</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:'初始化值',
      person:{
          name:'李大侠',
          age:30
      }
    }
  },
  created(){
    this.changeAge();
  },
  methods: {
    changeAge(){
      setInterval(() => {
        this.person.age++
         this.msg='初始化值'+new Date().toString()
      }, 1000);
    }
  },
  watch:{
    person:function(){
      console.log('对象发生变化----------------------------')
    }
  }
}
</script>

此时的结果是模板内容虽然发生了变化，但是监控的person对象并没有输出，原因就是只改变了属性值。
下面就说一下监控属性值变化的方法
方法一：
直接监控对象属性

 watch:{
    'person.age':function(){
        console.log('年龄发生变化')
    }
  }`

方法二:
利用计算属性达到目的

<template>
  <div id="app">
      <span>
        {{ msg }}
      </span>
      <p>{{ person.name}}年龄是{{ ageChange }}岁</p>
  </div>
</template>

此处省略。。。
computed:{
    ageChange:function(){
      return this.person.age  
       //当age 发生变化的时候，就会重新计算，任何使用watch进行监控
    }
  },
watch:{
    ageChange:function(){
      console.log('年龄发生变化============')
    }
  }