<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>监听属性基本实现方式总结</title>
</head>

<body>
    <div id="app">
        <h2>今天天气很{{info}}</h2>
        <button @click='changeMeater()'>切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    isHost: true
                }
            },
            // 这是计算属性computed
            computed: {
                info() {
                    return this.isHost ? '炎热' : '寒冷'
                }
            },
            methods: {
                changeMeater() {
                    this.isHost = !this.isHost
                    console.log('------', vm)
                }
            },
            //1. 监听方式1：new Vue 里面使用watch
            // 监听属性值的变化
            watch: {
                isHost: {
                    // handler函数时候在isHost发生改变的时候调用   参数 ：newValue  , oldValue  是改变前后的值
                    // 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
                    handler(newValue, oldValue) {
                        console.log('isHost改变了', newValue, oldValue)
                    },
                    // immediate 是初始化时，让handler调用一下
                    immediate: true,
                    deep: true //开启深度监听功能，例如属性是一个对象的时候，可以监听到里面的属性

                },
                // 同理，改变后的info也可以监听
                info: {
                    // handler函数时候在isHost发生改变的时候调用   参数 ：newValue  , oldValue  是改变前后的值
                    // 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
                    handler(newValue, oldValue) {
                        console.log('info改变了', newValue, oldValue)
                    },
                    // immediate 是初始化时，让handler调用一下
                    immediate: true,

                },


            },


        })

        /*

            //2. 监听方式2，用vue的实例vm：    需要传两个参数，1 要监听谁，2.怎么监听
            vm.$watch('isHost', {
                // handler函数时候在isHost发生改变的时候调用   参数 ：newValue  , oldValue  是改变前后的值
                // 案例：假设是做一个温度，就可以用前后的值相加减，做一些业务逻辑
                handler(newValue, oldValue) {
                    console.log('isHost改变了', newValue, oldValue)
                },
                // immediate 是初始化时，让handler调用一下
                immediate: true,

            })
        */
    </script>

</body>


</html>