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

Vue数据代理实现的重点：Object.defineProperty(obj，key，val)

Obj.defineProperty作用：

　　1. 一般用来给一个对象中增加键值对儿数据

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

　　注意：getter和setter会对data中的一层层的数据对象进行监测

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来监测，

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

标签：10,Vue,Vue10,vm,vue,defineProperty,getter,data,setter
来源： https://www.cnblogs.com/leafchen/p/16498325.html