位置: IT常识 - 正文

Vue学习——【第四弹】(vue系列教程)

编辑:rootadmin
Vue学习——【第四弹】 前言

推荐整理分享Vue学习——【第四弹】(vue系列教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue x,vue实用技巧,vue从入门到精通教程,vue从入门到实战,vue入门教程,vue x,vue系列教程,vue从入门到精通教程,内容如对您有帮助,希望把文章链接给更多的朋友!

上一篇文章 Vue学习——【第三弹】 中我们了解了MVVM模型,这篇文章接着学习Vue中的数据代理。

简单介绍

数据代理就是**一个对象(A)来代理对另一个对象(B)的属性操作(A一定要包含B)。**直接看定义大家可能觉得有些抽象,我们可以用代码来实现。

提到数据代理,我们会很容易想到一个重要的API:JavaScript中的Object.defineProperty() 方法:

通过对JavaScript的学习,我们知道可以用Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,它的语法是这样的:

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符

该方法的工作机制: 给对象添加属性值 value 给对象添加getter和setter getter 和setter用于对属性的读写进行监控

并且该方法还具有一些配置项,比如:

enumerable:true,//enumerable用于控制属性是否可以枚举,默认值时false writable:true,//该配置项可以控制属性是否可以被修改,默认是false configurable:true//该配置项可以控制属性是否可以被删除,默认值是false

那么接下来我们就来看看Object.defineProperty() 方法的使用方式:

<!-- 数据代理:通过一个对象代理对另一个对象中的属性进行操作 --> <script type="text/javascript"> let obj1 = {a:100} let obj2 = {b:200} // 当访问obj2.a的时候,就调用get函数,然后返回obj1中的属性a;当修改obj2.a时,obj1.a就会被修改 Object.defineProperty(obj2,'a',{ get(){ console.log('obj1.a被读取') return obj1.a }, set(value){ console.log('obj.a被修改') obj1.a = value } }) </script>

在控制台上操作:

Vue中的数据代理

我们知道Vue是渐进式的JavaScript框架,而Vue中的数据代理所调用的API就是Object.defineProperty() 方法,我们举几个例子,来观察一下Vue中的数据代理的实现:

<div id="demo"> <h1>姓名:{{name}}</h1> <h2>地址:{{address}}</h2> </div> <script type="text/javascript"> const vm = new Vue({ el:'#demo', data:{ name:'小明', address:'山东' } }) </script>

控制台上操作:

Vue学习——【第四弹】(vue系列教程)

我们在控制台发现了熟悉的两个属性——name和address,并且点开它们我们可以看到它们的值就是我们代码中的值;

前文提到使用Object.defineProperty() 方法时,getter() 和setter() 用于对属性的读写进行监控,我们不妨来验证一下Vue数据代理中的getter()和setter()

捕获data

在验证setter()函数的调用之前,我们先看一下如何去获取data:

当我们直接去获取data时发现控制台返回 undefined 这时候我们看一下我们写的代码:

<div id="demo"> <h1>姓名:{{name}}</h1> <h2>地址:{{address}}</h2> </div> <script type="text/javascript"> const vm = new Vue({ el:'#demo', data:{ name:'小明', address:'山东' } }) </script>

我们不难看出,vm中的data其实是vm配置对象中的一个属性,并非全局变量,因此我们无法通过vm.data直接获取data,这时候想要获取data,就需要用到vm._data进行获取: 并且我们发现,在vm._data中还出现了data中的name和address属性。

其实,这里的vm._data就是我们想要获取的data,比如我们举个例子来验证一下:

我们将含有name和address属性的data作为一个全局变量写在 vm 的外部,然后在Vue实例中写上一个data;再在控制台比较vm._data是否和data相同,结果是返回true,很明显,两者是相同的。

简单描述一下Vue中的数据代理的过程: vm 拿到data中的数据后,放在了vm里的_data中。vm中的name和address代理了_data中的name和address。读取vm.name时,调用getter()方法,读取了_data中的name。 修改了vm中的name时,就会调用setter()方法去修改_data中的name。 如果不做代理,在“{{ }}”中须要这样写成“{{_data.xxx}}”的形式;通过Vue中的数据代理,我们就可以简化缩写内容,只需要些{{xxx}}的形式即可。

明白以上原理,我们就可以很容易明白在进行数据代理时对getter()和setter()的调用啦。

getter()

在我们读取vm中的name属性时,负责对name进行读取的函数getter()就会被调用,然后执行对data中的name属性值进行读取。

setter()

并且在模板中的花括号里的内容我们都可以写成 _data.xxx 的形式,通过Vue的数据代理,我们就无需如此繁琐的写成_data.xxx的形式。

小结

通过代码的验证,下图可以为我们展现出Vue中的数据代理机制:

参考文献

Vue官方文档 MDN官方文档 Vue技能树 B站视频讲解

如有不足,感谢指正!

本文链接地址:https://www.jiuchutong.com/zhishi/299413.html 转载请保留说明!

上一篇:前端页面项目——博客系统(前端页面设计)

下一篇:<input> 实现输入框只能输入数字(个人认为最好的)(input输入语句)

  • 微信怎么隐藏来信息的内容(微信怎么隐藏来源)

    微信怎么隐藏来信息的内容(微信怎么隐藏来源)

  • 华为智慧助手图标怎么从桌面移除(华为智慧助手图标怎么隐藏)

    华为智慧助手图标怎么从桌面移除(华为智慧助手图标怎么隐藏)

  • 运行linux虚拟机属于什么(linux使用虚拟机)

    运行linux虚拟机属于什么(linux使用虚拟机)

  • 录屏有杂音怎么办(录屏有杂音怎么回事)

    录屏有杂音怎么办(录屏有杂音怎么回事)

  • airpods进水后如何处理(airpods进水后能去修好吗)

    airpods进水后如何处理(airpods进水后能去修好吗)

  • 小米8怎么隐藏app图标(小米8怎么隐藏刘海)

    小米8怎么隐藏app图标(小米8怎么隐藏刘海)

  • iphone11拍照发黄解决(iPhone11拍照发黄怎么办)

    iphone11拍照发黄解决(iPhone11拍照发黄怎么办)

  • 手机电筒开不了是什么原因(苹果手机电筒打不开了怎么办)

    手机电筒开不了是什么原因(苹果手机电筒打不开了怎么办)

  • 手机角落蓝屏慢慢变大(手机蓝屏越来越多怎么办?)

    手机角落蓝屏慢慢变大(手机蓝屏越来越多怎么办?)

  • 怎么在电脑上安装学习通(怎么在电脑上安装office办公软件)

    怎么在电脑上安装学习通(怎么在电脑上安装office办公软件)

  • 微信密码是指什么(微信密码指的是什么?)

    微信密码是指什么(微信密码指的是什么?)

  • 捡了个oppoA7x怎么解锁(捡的oppoa7x能解锁吗)

    捡了个oppoA7x怎么解锁(捡的oppoa7x能解锁吗)

  • 苹果手机不读卡是什么原因(苹果手机不读卡怎么办)

    苹果手机不读卡是什么原因(苹果手机不读卡怎么办)

  • 开始运行在哪(开始运行在哪里打开)

    开始运行在哪(开始运行在哪里打开)

  • 手机前摄像头模糊怎么办(手机前摄像头模糊怎么恢复)

    手机前摄像头模糊怎么办(手机前摄像头模糊怎么恢复)

  • vivo手机设置视频锁屏(vivo手机设置视频铃声怎么设置)

    vivo手机设置视频锁屏(vivo手机设置视频铃声怎么设置)

  • qq生日礼物有什么用(qq生日礼物有什么好处)

    qq生日礼物有什么用(qq生日礼物有什么好处)

  • 趣头条视频怎么下载(趣头条视频怎么分享到今日头条)

    趣头条视频怎么下载(趣头条视频怎么分享到今日头条)

  • 苹果11多少g运行(苹果11手机是多少g运行)

    苹果11多少g运行(苹果11手机是多少g运行)

  • 摄像头能看多宽(摄像头能看多宽视频介绍)

    摄像头能看多宽(摄像头能看多宽视频介绍)

  • 什么是局部变量和全局变量(什么是局部变量?)

    什么是局部变量和全局变量(什么是局部变量?)

  • 【uniapp】uni.request请求跨域问题解决方案(uniapp webgl)

    【uniapp】uni.request请求跨域问题解决方案(uniapp webgl)

  • 蒙塔尔巴诺埃利科纳,意大利西西里岛 (© Antonino Bartuccio/SOPA Collection/Offset by Shutterstock)(蒙塔巴诺督查)

    蒙塔尔巴诺埃利科纳,意大利西西里岛 (© Antonino Bartuccio/SOPA Collection/Offset by Shutterstock)(蒙塔巴诺督查)

  • 季度所得税费用如何计提
  • 增值税纳税义务确认时间
  • 年终奖怎么计税的
  • 资质费用是什么意思
  • 贴现收到的钱计入什么会计科目
  • 报税时资产总额怎么填
  • 应收款和应付款对抵
  • 票面3个点什么意思
  • 蔬菜批发销售免税政策
  • 来料加工企业的人工工资计入什么费用
  • 公司转让注册资金怎么弄
  • 分月计提利息会计分录
  • 现金管理规定有哪些主要内容
  • 纳税评估怎么办
  • 什么叫经纪代理服务
  • 待摊费用跨年冲销如何入账?
  • 承包外单位食堂会计怎么做账
  • 筹建期土地使用税分录
  • 开公司怎么报账
  • 当期可抵扣进项税额包括进项转出额吗
  • 租赁机器的支出怎么算
  • 发票拍照打印出来不清晰
  • linux系统怎么查看mac地址
  • 所得税税负率一般是百分比还是千分比
  • 病毒变种太多
  • 债务重组法律服务方案
  • dl是什么文件
  • thinkphp yii
  • 天国拯救晕倒的人多久起来
  • 代扣代缴企业所得税如何申报
  • 商业汇票抵付前欠货款的分录
  • vue项目部署到服务器上,页面空白
  • 伯里圣埃德蒙兹的人口
  • vue实现文件上传和下载
  • vue :data="data"
  • js面试必问
  • Android AsyncTack 异步任务实例详解
  • 小规模纳税人房产税优惠政策2023
  • 接受专利投资会计科目
  • 本期应补退税额和期末未缴税额
  • 浏览器任意链接在哪里
  • 支付版权使用费怎么记账
  • 财政拨款结转是
  • 外贸企业出口退税流程(详细步骤)
  • 差旅费用抵扣税款
  • 小规模免税收入怎么做账
  • 公司餐费怎么入账
  • 资产减值损失科目借方增加还是减少
  • 典当业销售的死当物品是什么意思
  • 长期待摊费用多少金额
  • 报关单未申报做账怎么办
  • 应付账款多怎么办
  • 冲销以前年度多提税金
  • 预付款为什么不能抵消工程款
  • 电商会计怎么做账
  • 小企业会计准则和一般企业会计准则的区别
  • 开个人普票需要身份证吗
  • 固定资产折旧度怎么计算
  • 其他业务收入在资产负债表哪里体现
  • sqlserver字符串转换成数字
  • sql数据采集
  • mac上mysql安装
  • window系统怎么用
  • asm是啥
  • dns server配置
  • centos文件权限详解
  • RadioSvr.EXE - RadioSvr是什么进程 有什么用
  • linux系统的
  • 80端口被system 占用解决方法
  • win10查看驱动
  • unity做cg
  • excel表格布局
  • node.js的流的作用
  • 菜单下一章
  • linux生成网卡配置文件
  • awk范围筛选
  • python面向
  • 电子税务局怎么删除办税员
  • 报税的资格
  • 一般纳税人销售二手车增值税税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设