Vue10-10 vue中的数据代理解析

Vue数据代理：vm下_data代理Vue实例中data(个人理解，课程中认为是vm代理Vue实例)

实现的重点：Object.defineProperty(obj，key，val)

Obj.defineProperty作用：

　　js中的两个对象，如果想要在其中一个中监测另一个对象的数据，可以使用Obj.defineProperty

　　1. 一般用来给一个对象中增加键值对儿数据（默认不会被枚举，不会被修改，不会被删除...， 需要增加对应的属性来实现枚举，修改删除等）

　　2. 高级属性： get(){}和set(newValue){},getter用来在传入的obj被使用时调用；setter用来在传入的obj发生修改时调用。

1.  当你创建Vue实例，在data中添加数据，并赋值给vm

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    student:{
                        name: "赵钱孙李",
                        address: '周家庄',
                    },
                }
            },
        })
    </script>

2.  此时，

　　1. Vue会给data下所有数据使用getter和setter来监测，注意：getter和setter会对data中的一层层的数据对象进行监测

　　2. Vue会使用Object.defineProperty()将Vue中的data对象代理到vm对象中的_data对象中，在_data中，使用getter和setter来监测data对象中的数据