<div id="app">{{message}}</div>

        <script type="text/javascript">

                let vm = new Vue({
                    el : '#app',
                    data : { message : {name:'小花'} }
                });

                /**
                    *   $watch(表达式, callback(新参数, 旧参数), [options]) 监听Vue实例的一个表达式
                    *   $watch 返回一个取消函数 用来停止触发回调
                    *   deep : true 普通监听不能监听到对象某一个参数值的变化 (数组变动不需要添加该参数)
                    *   注 : 在修改(不是替换)对象或数组时 旧值将与新值相同 因为它们索引同一个对象/数组 Vue不会保留修改之前值的副本
                */
                let unwatch = vm.$watch(
                    'message', 
                    // callback(新值, 旧值)
                    (newVal, oldVal) => c('name =', newVal.name, oldVal.name),
                    // deep : true 监听对象的属性变化
                    {deep : true}
                );

                // 如果调用$watch的回调则$watch不再监听变化
                // unwatch();

                // $data : 表示data对象里的所有属性
                // $watch监听对象的变化 如果是替换 则记录旧值 输出 name = 小蓝 小花
                vm.$data.message = {name:'小蓝'};
                // $watch监听对象的变化 如果是修改 则不记录旧值 输出 name = 小蓝 小蓝
                vm.$data.message.name = '小蓝';

        </script>