一、监视属性watch

1、当被监视的属性变化时，回调函数(handler)自动调用，进行相关操作
2、监视的属性必须存在，才能进行监视！！
3、监视的两种写法：

• (1)、 new Vue是传入watch配置
  (2)、通过 vm.$watch监视

举例：

 <div id="root">
        <h2>今天天气{{ info }}</h2>
        <button @click="change">切换天气</button>
</div>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    //创建Vue实例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            isHot: true,
        },

        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },

        //在vm中监视
        // watch : {
        //     isHot : {
        //         // immediate : true,  //初始化时，让handler调用一下
        //         // handler什么时候调用？ 当isHot发生改变时
        //         handler(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue);
        //         },
        //     },
        // },


    });


    //在vm外部监视
    vm.$watch('isHot', {
        // immediate : true,  //初始化时，让handler调用一下
        // handler什么时候调用？ 当isHot发生改变时
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        },
    })

    // console.log(vm);

</script>

二、深度监视：

1、Vue中的watch默认不监测对象内部值的变化(一层)
2、配置deep:true可以监测对象内部值改变(多层)

1、Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2、使用watch时根据数据的具体结构，决定是否采用深度监视

举例：

 <div id="root">
        <h2>今天天气{{ info }}</h2>
        <button @click="change">切换天气</button>
        <hr/>
        
        <h3>a的值是 :{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <hr/>

        <h3>b的值是 :{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a : 55,b:77}">彻底替换到numbers</button>
</div>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    //创建Vue实例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },

        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },

        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },

        watch: {
            isHot: {
                immediate : true,  //初始化时，让handler调用一下
                // handler什么时候调用？ 当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue);
                },
            },

            // 监视多级结构中，某个属性的变化
            // 'numbers.a' : {
            //     handler(){
            //         console.log('a变了');
            //     }
            // },

            // 监视多级结构中，所有属性的变化
            numbers : {
                deep : true,
                handler(){
                    console.log(111);
                    console.log('numbers变了');
                }
            },        
        },
    });
</script>

computed和watch之间的区别

1、computed能完成的功能，watch都可以完成
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等等)，最好写成箭头函数，
这样this的指向才是 vm 或 组件实例对象