首页 > 其他分享> 文章详细

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

2022-07-20 16:00:41 阅读：147 来源： 互联网

标签：10 Vue Vue10 vm vue defineProperty getter data setter

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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