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
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站视频讲解

如有不足,感谢指正!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/10075.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

全景丨0基础学习VR全景制作,后期篇:嵌入视频前期注意事项及后期处理

大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 一、前期拍摄要点 嵌入视频的简介和用途 livepano即完全无缝融合到全景图中的热点嵌入视频。 这种无缝融合是真正无缝&#xff0c;从而让观者产生沉浸感和真实感。例如在场景中放入宠物、让喷泉动起来、灯光…

MPAM中PARTID的虚拟化(Virtualization)

MPAM支持对PARTID的virtualization&#xff0c;需要在满足所有以下条件下才能使用&#xff1a; 在当前的security状态下有实现EL2&#xff1b;支持MPAM virtualization&#xff0c;也就是MPAMIDR_EL1.HAS_HCR等于1&#xff1b; 以下是MPAM中使用virtual-to-physical PARTID ma…

Scala之面向对象

目录 Scala包&#xff1a; 基础语法&#xff1a; Scala包的三大作用&#xff1a; 包名的命名规范&#xff1a; 写包的好处&#xff1a; 包对象&#xff1a; 导包说明&#xff1a; 类和对象&#xff1a; 定义类&#xff1a; 封装&#xff1a; 构造器&#xff1a; 主从…

Spark 之 解析json的复杂和嵌套数据结构

本文主要使用以下几种方法&#xff1a; 1&#xff0c;get_json_object()&#xff1a;从一个json 字符串中根据指定的json 路径抽取一个json 对象 2&#xff0c;from_json()&#xff1a;从一个json 字符串中按照指定的schema格式抽取出来作为DataFrame的列 3&#xff0c;to_j…

【SpringMVC】第一个springmvc项目

需求&#xff1a; 用户在页面发起一个请求&#xff0c; 请求交给springmvc的控制器对象&#xff0c;并显示请求的处理结果&#xff08;在结果页面显示一个欢迎语句&#xff09;。 实现步骤&#xff1a; 新建web maven工程 加入依赖 spring-webmvc依赖&#xff0c;间接把spri…

FLINK 在蚂蚁大规模金融场景的平台建设

摘要&#xff1a;本文整理自蚂蚁集团高级技术专家、蚂蚁集团流计算平台负责人李志刚&#xff0c;在 Flink Forward Asia 2022 平台建设专场的分享。本篇内容主要分为四个部分&#xff1a; 主要挑战架构方案核心技术介绍未来规划点击查看直播回放和演讲 PPT 一、主要挑战 1.1 金…

【 Spring MVC 核心功能(三) - 输出数据】

文章目录引言一、返回静态页面二、返回非静态页面的数据三、返回 JSON 对象四、请求转发(forward)和请求重定向(redirect)五、拓展&#xff1a;IDEA 热部署(热加载)3.1 添加 SpringBoot DevTools 框架3.2 开起 IDEA 的自动编译3.3 开起运行中的热部署3.4 使用 debug 启动项目引…

【机器学习】SoftMax多分类---学习笔记

SoftMax---学习笔记softMax分类函数定义&#xff1a;softmax分类损失函数softMax分类函数 首先给一个图&#xff0c;这个图比较清晰地告诉大家softmax是怎么计算的。 (图片来自网络) 定义&#xff1a; 给定以歌nknknk矩阵W(w1,w2,...,wk)W(w_1,w_2,...,w_k)W(w1​,w2​,...,w…

Arcgis小技巧【12】——ArcGIS标注的各种用法和示例

标注是将描述性文本放置在地图中的要素上或要素旁的过程。 本文整理了ArcGIS中的各种标注方法、可能遇到的问题和细节&#xff0c;内容比较杂&#xff0c;想到哪写到哪。 一、正常标注某一字段值的内容 右键点击【属性】&#xff0c;在【标注】选项卡下勾选【标注此图层中的的…

Python 小型项目大全 1~5

一、百吉饼 原文&#xff1a;http://inventwithpython.com/bigbookpython/project1.html 在百吉饼这种演绎逻辑游戏中&#xff0c;你必须根据线索猜出一个秘密的三位数。该游戏提供以下提示之一来响应您的猜测&#xff1a;"Pico"&#xff0c;当您的猜测在错误的位置有…

【SpringMVC】7—文件上传

⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 如果文章对你有所帮助&#xff0c;可以点赞&#x1f44d;…

布隆过滤器讲解及基于Guava BloomFilter案例

目录 1、布隆过滤器是什么 2、主要作用 3、存储过程 4、查询过程 5、布隆过滤器的删除操作 6、优点 7、缺点 8、测试误判案例 8.1、引入Guava依赖 8.2、编写测试代码 8.3、测试 8.4、BloomFilter实现原理 9、总结 推荐博主视频&#xff0c;讲的很棒&#xff1a;布隆…

华为运动健康服务Health Kit 6.10.0版本新增功能速览!

华为运动健康服务&#xff08;HUAWEI Health Kit&#xff09;6.10.0 版本新增的能力有哪些&#xff1f; 阅读本文寻找答案&#xff0c;一起加入运动健康服务生态大家庭&#xff01; 一、 支持三方应用查询用户测量的连续血糖数据 符合申请Health Kit服务中开发者申请资质要求…

大数据项目之电商数据仓库系统回顾

文章目录一、实训课题二、实训目的三、操作环境四、 实训过程&#xff08;实训内容及主要模块&#xff09;五、实训中用到的课程知识点六、实训中遇到的问题及解决方法七、课程实训体会与心得八、程序清单一、实训课题 大数据项目之电商数据仓库系统 二、实训目的 完成一个电…

7.基于概率距离快速削减法的风光场景生成与削减方法

matlab代码&#xff1a;基于概率距离快速削减法的风光场景生成与削减方法 采用蒙特卡洛进行场景生成&#xff0c;并再次进行场景缩减。 clear;clc; %风电出力预测均值E W[5.8,6.7,5.8,5.1,6.3,5,6.2,6,4.1,6,7,6.8,6.5,6.9,5,5.6,6,5.8,6.2,4.7,3.3,4.4,5.6,5]; %取标准差为风…

在unreal中的基于波叠加的波浪水面材质原理和制作

关于水的渲染模型 如何渲染出真实的水体和模拟&#xff0c;是图形学&#xff0c;游戏开发乃至仿真领域很有意思的一件事 记得小时候玩《Command & Conquer: Red Alert 3》&#xff0c;被当时的水面效果深深震撼&#xff0c;作为一款2008年出的游戏&#xff0c;现在想起它…

算法:将一个数组旋转k步

题目 输入一个数组如 [1,2,3,4,5,6,7]&#xff0c;输出旋转 k 步后的数组。 旋转 1 步&#xff1a;就是把尾部的 7 放在数组头部前面&#xff0c;也就是 [7,1,2,3,4,5,6]旋转 2 步&#xff1a;就是把尾部的 6 放在数组头部前面&#xff0c;也就是 [6,7,1,2,3,4,5]… 思路 思…

C++继承(上)

一、继承的概念及定义1.继承的概念2.继承定义2.1定义格式2.2继承关系和访问限定符2.3继承基类成员访问方式的变化二、基类和派生类对象赋值转换三、继承中的作用域一、继承的概念及定义 1.继承的概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允…

聊聊如何运用JAVA注解处理器(APT)

什么是APT APT&#xff08;Annotation Processing Tool&#xff09;它是Java编译期注解处理器&#xff0c;它可以让开发人员在编译期对注解进行处理&#xff0c;通过APT可以获取到注解和被注解对象的相关信息&#xff0c;并根据这些信息在编译期按我们的需求生成java代码模板或…

【SQL Server】数据库开发指南(一)数据库设计

文章目录一、数据库设计的必要性二、什么是数据库设计三、数据库设计的重要性五、数据模型5.1 实体-关系&#xff08;E-R&#xff09;数据模型5.2 实体&#xff08;Entity&#xff09;5.3 属性&#xff08;Attribute&#xff09;5.5 关系&#xff08;Relationship&#xff09;六…
最新文章