vue的监视属性watch详解

监视属性watch:

（1）当被监视的属性变化时，回调函数自动调用，监视的属性必须存在，才能进行监视

（2）配置deep:true 可以监视对象内部值改变，使用watch时根据数据的具体结构，决定是否开启深度监视

     <div id="root">
        <P>今天你画的妆很像{{info}}</P>
         <button @click="total=!total">形象切换</button> 
         <P>a值{{numbers.a}}</P>
        <button @click="numbers.a++">点击</button>
    </div>

<script>
  const vm = new Vue({ 
            el: '#root',
            data: {
                total: true，
                  numbers: {
                    a: 1,
                    b: 2
                }
            },
            computed: {
                info: function() {
                    return this.total ? "邓紫棋" : "周杰伦"
                }
            },
            //监视属性的第一种写法
            watch: { //监视属性(和计算属性写法一样):用来监视属性的变化
                //监视属性total
                total: {
                    immediate: true, //页面加载初始化时让hander调用一下（可以不加）
                    //handler()当监视的属性发生改变时调用
                    //handler(newValue，oldValue)有两个参数，newValue，属性被改变新的值，
                    // oldValue属性改变旧的值
                    handler(newValue, oldValue) {
                        console.log("total被修改了")
                    }
                },
                 numbers: {
                    deep: true, //开启深度监视
                    handler() {
                        console.log("numbers.被改变了")
                    }

            }

        })
    </script>