vue中的watch监听

<div id='app'>
    {{msg}}
    <button @click='msg="小红"'>修改</button>
    <br><hr>
    {{obj.name}}
    <button @click='obj.name = "joth"'>修改对象</button>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        msg:'小明',
        obj:{
                name:'rose',
                age:18
            }
    },
    watch:{
        // 浅监听
       /* msg(newVal,oldVal){
            console.log(newVal,oldVal);//小红 小明
        }, */

         // 浅监听 另一种写法
        msg:{
             deep:false,
             handler(newval,oldval){
                  console.log('浅监听');
                  console.log(newval,oldval);//小红 小明
             }
                    
       },

        // 对象深监听  只打印新obj
        obj:{
             deep:true,
             handler(newval){
                  console.log('obj深监听');
                  console.log(newval);//{age: 18, name: "joth"}
             }
         },
         // 将对象转为基本类型，进行浅监听
         'obj.name'(newVal,oldVal){
               console.log('对象转为基本类型，进行浅监听');
               console.log(newVal,oldVal);//joth rose
         }
    }
})

</script>