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

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

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

        let vm = new Vue({
            el:'#app',
            data:circle,
            watch:{
                computedPosition:{
                    handler(newValue,oldValue) {
                        let str = `位置从(${oldValue.x},${oldValue.y})变化到(${newValue.x},${newValue.y})`;
                        console.log(str);

                    },
                    deep:true //监听计算属性，可以获取新值和旧值
                }
            },
            computed:{
                computedPosition(){
                    return JSON.parse(JSON.stringify(this.position));
                }
            },
        });

    </script>
</body>
</html>