<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听immediate</title>
</head>
<body>
    <div id="app">
        {{position}}--{{position2}}
        <br>
        <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,
            },
            position2:{
                x:0,
                y:0,
            }
        };

        let vm = new Vue({
            el:'#app',
            data:circle,
            watch:{
                position: {
                    handler(value){
                        this.position2.x = this.position2.x + Math.random();
                        this.position2.y = this.position2.y + Math.random();
                        console.log(this.position2.x,this.position2.y);
                    },
                    deep:true,
                    immediate:true,//监听初始化时，就执行运算
                }
            }
        });
    </script>
</body>
</html>