草庐IT

Vue学习——【第四弹】

沃和莱特 2023-04-15 原文

前言

上一篇文章 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
gettersetter用于对属性的读写进行监控

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

	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>

控制台上操作:

我们在控制台发现了熟悉的两个属性——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站视频讲解

如有不足,感谢指正!

有关Vue学习——【第四弹】的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  2. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  6. ruby - 我如何学习 ruby​​ 的正则表达式? - 2

    如何学习ruby​​的正则表达式?(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具,因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1881231/

  7. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  8. 机器学习——时间序列ARIMA模型(四):自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式:ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵,分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型,求出其滞

  9. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

  10. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

随机推荐