<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监听</title>
</head>
<body>
    <div id="app">
        {{position2}}
        <input type="number" v-model.number="position.x">
        <input type="number" v-model.number="position.y">
        <input type="number" v-model="radius">
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let circle = {
            position:{
                x:0,
                y:0,
            },
            radius:10
        };

        let vm = new Vue({
            el:'#app',
            data:circle,
            watch:{
                //开启深度监听
                position: {
                    handler(value){
                        let str = `在watch中监听到：位置变化了(${value.x},${value.y})`;
                        console.log(str);
                    },
                    deep:true,
                }
            },
            computed:{
                position2(){
                    let str = `计算属性被触发：位置变化了(${this.position.x},${this.position.y})`;
                    console.log(str);
                    return {
                        x:this.position.x + 1,
                        y:this.position.y + 1
                    }
                }
            }
        })

        vm.position.x = 3;
    </script>
</body>
</html>