vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理

news2024/9/20 5:49:39

接着上一节,学一学vue中的数据代理。学vue这几天,最大的感受就是,名词众多,听得发懵。。不过,深入理解之后,其实说得都是一回事。

在Vue中,数据代理是指在实例化Vue对象时,将data对象中的属性代理到Vue实例上,以便在模板中直接访问和修改data对象中的属性。

看起来很晕,其实在vue2学习笔记6 - 初步了解vue的实例和原型中已经用到,并且我当时有一个疑问:

64bfe1e73e63470c9a35572fd0e28e09.png

红框中便是应用:我们可以直接访问对象中的属性,而不必通过$data来访问。

那么我的疑问的答案也来了:简化模板中访问和修改data中的属性的操作。通过数据代理,我们可以直接在模板中使用this来访问和修改data中的属性,而无需使用this.data来访问和修改。

下面,说说稍微底层一点的东西。

7b8feae76a5a44c2a89e0e0b921ab7c3.png

在vue实例中,定义了两个属性:name和address。

在console中打印出vue实例vm,我们可以从中看到_data中有两个属性,name和address。这是我们定义的。

de8f56749ee647fbbc5e1e8b7e72550a.png

然而,在vm中,外层,我们同样可以看到两个属性(不带$或_,即不是vue的内置属性或方法,而是用户自定义的)。

8993abfeb48f4d379fccf69530032d5e.png

其实,我们并没有在vm下定义这两个属性,只是在data中定义的,外面这两个,便是vue通过object.defineProperty自动给我们添加的,并且也调用了setter、getter方法,这便是vue的数据代理。

dfc3dba48fbb45a384443b931fe3d471.png

需要注意的是,数据代理只能代理data对象中的属性,无法代理data对象中的嵌套属性(对象)。如果需要代理嵌套属性,可以使用computed属性来实现。另外,数据代理也无法代理Vue实例上已有的属性和方法(所以,自定义属性时,不要占用vue关键字)。

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++高阶】精通AVL树:全面剖析与深度学习

目录 🚀 前言一: 🔥 AVL树的性质二: 🔥 AVL树节点的定义三: 🔥 AVL树的插入四: 🔥 AVL树的平衡调整(附动图) 五:🔥 AVL树的…

防御保护课-防火墙接口配置实验

一、实验拓扑 (我做实验用的图如下) 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 配IP; 划分vlan并配置vlan; 配置路由和安全策略。 四、实验配置 1、画图并…

C++与lua联合编程

C与lua联合编程 一、环境配置二、lua基本语法1.第一个lua和C程序2.基本数据类型和变量2.1 Nil2.2 Booleans2.3 Numbers2.4 String(最常用) 3. 字符串处理3.1 错误处理3.2 字符串长度:string.len3.3 字符串子串 :string.sub3.4 字符串查找: string.find3.5字符串替换: string.gs…

Evil-WinRM一键测试主机安全情况(KALI工具系列四十四)

目录 1、KALI LINUX 简介 2、Evil-WinRM 3、信息收集 3.1 目标IP 3.2 kali的IP 4、操作步骤 4.1 用户访问 4.2 使用哈希值 4.3 文件处理 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版 ,广泛用于网络安全社区。它具有全…

swiftui使用ScrollView实现左右滑动和上下滑动的效果,仿小红书页面

实现的效果如果所示,顶部的关注用户列表可以左右滑动,中间的内容区域是可以上下滚动的效果,点击顶部的toolbar也可以切换关注/发现/附近不同页面,实现翻页效果。 首页布局 这里使用了NavigationStack组件和tabViewStyle样式配置…

在项目服务器部署git 并实现自动提交

以下场景适合在服务器当中使用git 方便提交代码,同时不需要外部的git仓库(码云gitee或者github作为管理平台)。依靠服务器本身ssh 连接协议做为git提交的地址,同时利用钩子自动同步项目代码 首先下载git sudo apt update sudo a…

Linux最直观的性能分析(热点分析)-编译perf并生成火焰图

本文先介绍了linux下perf工具的使用场景,然后对命令行安装和源码编译安装两种方式做了说明,接下来通过最简单的perf top命令给出perf的直观印象,最后通过perf record生成火焰图的方式说明如何发现进程中的函数热点。 一、perf工具介绍 per…

00 JavaWeb

学习资料:B站视频-黑马程序员JavaWeb基础教程 文章目录 JavaWeb1、JavaWeb简介2、 JavaWeb主要内容3、JavaWeb技术栈4、JavaWeb课程安排5、Web核心课程安排 JavaWeb 1、JavaWeb简介 Web:全球广域网,也称为万维网(www),能够通过浏…

C++: 链表回文结构/分割链表题解

目录 1.链表的回文结构 分析 代码 2.链表分割 ​编辑分析 代码 1.链表的回文结构 分析 这道题的难点是空间复杂度为O(1) 结合逆置链表找到链表的中间节点就可以解决了。 先找到链表的中间节点,再对中间节点的下一个节点进行逆置&…

macbook pro大模型推理

安装与配置 参考github ollama 链接安装ollama。安装完成后,安装常用的模型,下载速度超快。 性能测试 在进行实际测试之前,我首先对模型进行了预处理,以确保其在 M3 Max 上能够高效运行。测试过程中,我主要关注了以下几个方面: 模型加载时间 加载大型模型通常需要较…

Python WebUIAPI:打造交互式Web界面的利器

Python WebUIAPI:打造交互式Web界面的利器 引言:交互式Web界面的革新 在当今快速发展的互联网时代,Web界面的交互性已成为衡量用户体验的重要标准。Python作为一门流行的编程语言,其生态中涌现出许多强大的库来帮助开发者构建交互…

组队学习——贝叶斯分类器

前言 本次数据继续沿用上一次主题的【组队学习——支持向量机-CSDN博客】 数据处理部分延续【组队学习——支持向量机】主题的处理办法对应划分训练集和验证集 模型选择 本次贝叶斯分类器模型的较多,常用的为高斯朴素贝叶斯分类器、多项式朴素贝叶斯分类器、伯努…

2024年超好用的4款PDF阅读器推荐

PDF文件已经是我们平时常常会接触到的文件,但是无论是阅读和编辑都需要依赖一些工具,所以今天给大家介绍的是4个很多人都在使用的PDF阅读器。 1、福昕PDF阅读软件 这款PDF编辑器是一个大厂其他的产品,功能非常的强大,…

Build a Large Language Model (From Scratch)GPT-4o翻译和代码每行中文注释Ch4

目录 4 Implementing a GPT model from Scratch To Generate TextThis chapter covers4.1 Coding an LLM architectureListing 4.1 A placeholder GPT model architecture class4.2 Normalizing activations with layer normalization4.3 Implementing a feed forward network …

STM32CUBEMX_SPI_驱动WS2811灯带

STM32CUBEMX_SPI_驱动WS2811灯带 前言: 关于这种带芯片的之前我都是使用GPIO模拟时序,但是带来一个很大的弊端,那就是严重占用CPU资源,使得其他代码逻辑没办法正常执行了,想办法搞一个单片机的外设使用DMA功能&#xf…

LeetCode-day21-1186. 删除一次得到子数组最大和

LeetCode-day21-1186. 删除一次得到子数组最大和 题目描述示例示例1:示例2:示例3: 思路代码 题目描述 给你一个整数数组,返回它的某个 非空 子数组(连续元素)在执行一次可选的删除操作后,所能得…

【学术研究、研究热点、最新前沿】如何跟踪最新的论文

1.跟踪arxiv 使用https://www.arxivdaily.com/接收每天的推送。 2.跟踪热点文章的引用 使用semantic scholar。 3.跟踪某个学术大佬或者主题 3.1 使用web of science。 3.2 使用文献鸟 4.跟踪某个期刊

pico+unity3d 射线交互教程

前期配置:环境配置参考教程一,手部模型参考教程二,场景基于上一篇搭建。 最终效果:手部射线(初始不可见)对准 UI 显示,按下手柄 Trigger 键与可交互 UI(如 Button、Toggle、Slider …

Android APP 基于RecyclerView框架工程(知识体系积累)

说明:这个简单的基于RecyclerView的框架作用在于自己可以将平时积累的一些有效demo整合起来(比如音视频编解码的、opengles的以及其他也去方向的、随着项目增多,工程量的增加,后期想高效的分析和查找并不容易)&#xf…

vscode 环境

这张截图显示的是在VS Code(Visual Studio Code)中选择Python解释器的界面。不同的Python解释器及其虚拟环境列出了可选项,用户可以根据需要选择合适的解释器来运行Python代码。以下是对截图中信息的详细解释: 解释器选择界面 当…