Vue watch computed和watch的区别

Vue watch
- watch和computed的区别

Vue watch

主要用于监听属性的变化，去做一些类似发送请求这样的工作
可以拿到变化前后的属性值
可以检测对象深层次属性以及是否在初始化就触发

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../lib/vue.js"></script>

<body>
    <div id="root">
        <span>今天天气很{{info}}</span>
        <br>
        <button @click="toggleWeather">切换天气</button>
        <br>
        {{numbers.a}}
        <button @click="changeNumbers('a')">新增a</button>
    </div>
    <script>
        const weatherToggleMap = {
            hot: {
                toggle: 'cold',
                text: '炎热'
            },
            cold: {
                toggle: 'hot',
                text: '凉爽'
            }
        }

        const vm = new Vue({
            el: "#root",
            data: {
                weather: 'hot',
                // 深层属性
                numbers: {
                    a: 1,
                    b: 2
                }
            },
            methods: {
                toggleWeather() {
                    this.weather = weatherToggleMap[this.weather]?.toggle
                },
                changeNumbers(tag) {
                    ++this.numbers[tag]
                }
            },
            computed: {
                info: function () {
                    return weatherToggleMap[this.weather]?.text
                }
            },
            watch: {
                weather: {
                    handler() {
                        console.log('weather change ...');
                    }
                },
                // 'numbers.a':{
                //     handler(){
                //         console.log('numbers change');
                //     }
                // },
                numbers: {
                    handler(newValue, oldValue) {
                        console.log('numbers change');
                    },
                    // 初始化的时候执行一下
                    immediate: true,
                    // 深度监听
                    deep: true
                }
            }
        })

        // vm.$watch('numbers', {
        //     handler(newValue, oldValue) {
        //         console.log('numbers change');
        //     },
        //     // 初始化的时候执行一下
        //     immediate: true,
        //     // 深度监听
        //     deep: true
        // })
    </script>
</body>

</html>