<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 数据机制,通过访问对象间接访问目标对象的属性 -->
    <!-- 数据机制的实现需要依靠Object.defineProperty()方法 -->
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // 目标对象
        let target = {
            name : "zhangSan"
        };
        // 对象
        let proxy = {};
        // 那么如果我们需要实现数据机制,就需要给proxy增加一个name属性
        Object.defineProperty(proxy,"name",{
            // 有三个点就代表这个属性是出来的
            // 他需要动态获取,在此之前是未知的
            get()
            {
                // 间接访问目标对象的属性
                return target.name;
            },
            set(value)
            {
                // 修改对象就可以改目标对象
                target.name = value;
            }
        });
        // 这就是我们的VM对象实现的底层方式
        // let target = {
        //     name : "zhangSan"
        // };
        // const vm = new Vue({
        //     el : "#app",
        //     data : target
        // });
        const vm = new Vue({
            el : "#app",
            data : {
                // 这里也是依赖get和set实现的获取值
                msg : "Hello!!!",
                // vue实例不会给以_和$符号开始的属性名做数据
                _name : "啊哈哈哈",
                $age : 20
                // 因此data的属性名字不能以$和_开始作为属性名
            }
        });
    </script>
</body>
</html>