位置: 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输入语句)

  • 电脑连着wifi显示地球(电脑显示wifi)

    电脑连着wifi显示地球(电脑显示wifi)

  • 闲鱼多久确认收货不会被冻结(闲鱼多久确认收货有效)

    闲鱼多久确认收货不会被冻结(闲鱼多久确认收货有效)

  • qq邮箱登录入口在哪里(qq邮箱登录入口官网手机登录)

    qq邮箱登录入口在哪里(qq邮箱登录入口官网手机登录)

  • 应用分身是什么意思呢(应用分身是什么时候开始的软件)

    应用分身是什么意思呢(应用分身是什么时候开始的软件)

  • p40pro是双扬声器吗(p40pro是双扬声器吗?)

    p40pro是双扬声器吗(p40pro是双扬声器吗?)

  • 云台电机过载解决办法(云台电机过载解除方法)

    云台电机过载解决办法(云台电机过载解除方法)

  • 苹果11充电发热很烫什么原因(苹果11充电发热怎么回事)

    苹果11充电发热很烫什么原因(苹果11充电发热怎么回事)

  • qq怎么弄离线请留言状态(qq怎么搞离线状态)

    qq怎么弄离线请留言状态(qq怎么搞离线状态)

  • 双击home键有什么用(双击home键延迟怎么办)

    双击home键有什么用(双击home键延迟怎么办)

  • 衡量微型计算机价值的主要依据是(衡量微型计算机性能的主要指标不包括)

    衡量微型计算机价值的主要依据是(衡量微型计算机性能的主要指标不包括)

  • 华为core什么意思(huaweicorela)

    华为core什么意思(huaweicorela)

  • 原装手机壳变黄怎么办(原装手机壳变黄了怎么变白)

    原装手机壳变黄怎么办(原装手机壳变黄了怎么变白)

  • 小米10用什么膜(小米10用什么膜最好)

    小米10用什么膜(小米10用什么膜最好)

  • 重启和关机再开机一样吗(重启和关机再开机的区别)

    重启和关机再开机一样吗(重启和关机再开机的区别)

  • 网络堆栈要开启吗(网络堆栈要开启什么功能)

    网络堆栈要开启吗(网络堆栈要开启什么功能)

  • 魅族16thplus多少瓦充电(魅族16thplus多少钱)

    魅族16thplus多少瓦充电(魅族16thplus多少钱)

  • 拼多多拼单不成功会发货吗(拼多多拼单不成功几率大吗)

    拼多多拼单不成功会发货吗(拼多多拼单不成功几率大吗)

  • 屏幕录制是什么意思(手机屏幕录制是什么)

    屏幕录制是什么意思(手机屏幕录制是什么)

  • 如何快速应对超星网课?(如何快速应对超载行为)

    如何快速应对超星网课?(如何快速应对超载行为)

  • 手机怎么测血型(手机如何查血型)

    手机怎么测血型(手机如何查血型)

  • ppt实时显示时间(ppt实时显示时间不更新)

    ppt实时显示时间(ppt实时显示时间不更新)

  • 微信后面有个耳朵怎么回事(微信后面有个耳朵标志)

    微信后面有个耳朵怎么回事(微信后面有个耳朵标志)

  •  爱剪辑的黑屏视频素材在哪(爱剪辑黑屏录像怎么设置)

    爱剪辑的黑屏视频素材在哪(爱剪辑黑屏录像怎么设置)

  • 为什么微信笔记发送失败(为什么微信笔记里的图片一直加载不出来)

    为什么微信笔记发送失败(为什么微信笔记里的图片一直加载不出来)

  • Swagger-的使用(详细教程)

    Swagger-的使用(详细教程)

  • 存货是根据总账科目计算填列吗
  • 投资收益转入资本公积
  • 发生了原材料运进和成品运出,但并未发生所有权
  • 建筑业收到预收款预缴增值税
  • 计提业务提成怎么做账
  • 制药企业税收优惠政策
  • 家属机票怎么办理
  • 贸易公司委托加工买进和卖出东西不一样
  • 付给总机构的管理费可以税前扣除吗
  • 销售退回的会计分录金额怎么写
  • 单位员工去外地上班
  • 出口预收货款发生的时间和报表上的时间不一样怎么办
  • 法律规定临时工工资最迟多久结清
  • 营改增文件2019
  • 主营业务收入怎么结转
  • 挖掘机折旧怎么计算
  • 包工包料的工程怎么做账
  • 主营业务收入和其他业务收入的区别
  • 计提增值税的会计科目
  • 如何设置让电脑运行更快
  • php的使用
  • php与mysql基础教程
  • 工程投标保证金最新规定
  • 股权转让有哪些股
  • 股份支付的成本费用可否税前扣除?
  • 利息补偿金怎么算
  • laravel多条件查询
  • 记账凭证的总账科目是什么
  • 装修费用如何做分录
  • 野外生存探险家
  • mmdetection ValueError: need at least one array to concatenate解决方案
  • 海关进口增值税计入什么科目
  • openresty php
  • 专家坐诊信息
  • 研发人员工资计入什么科目
  • 管家婆系统能否查询上月库存明细
  • 非房地产企业转让建筑物,计提土地增值税时应借记
  • sqlserver调度
  • 施工企业增值税账务处理
  • 中小型企业营业额多少
  • 递延所得税资产和负债账务处理
  • 印花税减免税优惠政策2019
  • 含有增值税的工作有哪些
  • 企业接受捐赠如何确认收入
  • 工资每月变动社保怎么变
  • 企业所得税汇算表
  • 一般纳税人纳税申报表
  • 其他业务收入如何开票
  • 银行信贷人员岗位职责
  • 预付款怎样做会计分录
  • 运维过程
  • Advanced Pagination for MySQL(mysql高级分页)
  • 怎么操作win10系统
  • 2003怎么创建用户
  • Windows Server 2008作为打印服务器排错
  • 看linux系统
  • reg注册表格式文件
  • WIN10如何设置电脑自动锁屏
  • 苹果电脑macbookpro忘记密码
  • svchosl.exe - svchosl是什么进程 有什么作用
  • windows7的使用方法
  • win7系统如何将插孔设置为ac97前面板
  • 系统升级后c盘空间小了
  • win10系统office2007每次打开都要配置
  • 关于我和鬼变成家人的那件事
  • 杂志内页广告
  • cocos2dx减少内存开销
  • Unity3D游戏开发标准教程
  • opengl渲染流程图
  • 使用linux的收获心得
  • uploadify上传无反应
  • python 聚类算法包
  • js中split方法的作用
  • JavaScript中的方法名不区分大小写
  • eclipse怎么连接derby数据库
  • pdb settrace
  • 实际金额与报关金额不符
  • 网商贷补充收款方式
  • 尤溪特产春节礼品
  • 济南车辆购置税完税证明电子版
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设