课程总结之什么是Vue中的数据代理

哈喽,大家好,这里是Jip_Ao,不定时更新,这是自己学习的总结,欢迎交流、补充、但不要喷,就讨论问题!!!

课程链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

这是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h3>学生名称:{{name}}</h3>
            <h3>学生年龄:{{age}}</h3>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动是生成生产提示

        const vm = new Vue({
            el:'#root',
            data:{
                name:'渣渣123',
                age:'18'
            }
        })
    </script>
</html>

 

 那么什么是Vue中的数据代理呢?

结合代码可以看出vm中是没有name这个属性的但是他却能够得到"渣渣123"这个值,为什么呢 

 vm._data之后可以看到_data不仅仅有age与name(_data就是我们代码中data),还有get name,set name,这里的get与set就和Object.defineProperty有异曲同工之妙,不懂的同学可以先去查查Object.defineProperty

这里我们可以看到vm本身是没有name这个属性vm中有data,data中才有name,好,说说我的理解:vm把data中的属性name通过get获得在通过set将name原有的值改变

其实我原来的理解是vm将data中的属性统统复制一份到自己这,然后就可以改变name和age的值了,但是仔细想想感觉不妥,好了今天的总结就到这!欢迎补充 指出问题 但是不要喷,单纯讨论问题!!!Thanks♪(・ω・)ノ

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值