vue从入门到精通(六):数据代理

一,什么是数据代理

通过一个对象代理对另一个对象中属性的操作

二,object.defineproperty方法

object.defineproperty方法可以对对象追加属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>object.defineproperty方法</title></head><body></body><script type="text/javascript">let person = {name:'张三',sex:'男'}//对对象追加属性Object.defineProperty(person,'age',{value:18,// enumerable:true,//控制属性是否可以枚举 默认flase// writeable:true,//控制属性是否可以被修改,默认false// configurable:true,//控制属性是否可以被删除,默认false//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值get:function(){return 'aaa'},//当有人修改person的age属性时,set函数(setter)就会被调用,且收到修改的具体值set:function(value){console.log(value)}})console.log(Object.keys(person))console.log(person)</script>
</html>

使用object.defineproperty实现数据代理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用object.defineproperty实现数据代理</title></head><body></body><script type="text/javascript">let obj={x:100}let obj2={y:200}object.defineproperty(obj2,'x'{get(){return obj.x},set(val){obj.x = val}})</script>
</html>

三,Vue中的数据代理

  1. Vue中的数据代理:
    通过vm对象来代理data对象中属性的操作(读/写)

  2. Vue中数据代理的好处:
    更加方便的操作data中的数据

  3. 基本原理:
    通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter在getter/setter内部去操作(读/写)data中对应的属性。

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

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

相关文章

[Redis]Set类型

集合类型也是保存多个字符串类型的元素的&#xff0c;但和列表类型不同的是&#xff0c;集合中 1&#xff09;元素之间是无序的 2&#xff09;元素不允许重复 一个集合中最多可以存储2^32-1个元素。 Redis 除了支持集合内的增删查改操作&#xff0c;同时还支持多个集合取交…

【数据结构】链表----头结点的作用

链表是一种常见的数据结构&#xff0c;由一系列节点&#xff08;Node&#xff09;组成&#xff0c;每个节点包含数据和指向下一个节点的指针。链表的头结点&#xff08;Head Node&#xff09;也称为哨兵位&#xff0c;是链表的起点&#xff0c;通常有以下几个重要作用&#xff…

盲盒小程序库存管理的关键策略

随着盲盒经济的兴起&#xff0c;越来越多的商家开始投入盲盒小程序的开发与运营。然而&#xff0c;在享受市场红利的同时&#xff0c;库存管理的问题也随之而来。合理的库存管理不仅能够满足用户需求&#xff0c;还能有效优化库存周转率&#xff0c;提升商家的盈利能力。本文将…

有光摄影分享网站系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;基础数据管理&#xff0c;论坛管理&#xff0c;足球资讯管理&#xff0c;球队管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;活动&#xff0c;论坛…

『大模型笔记』什么是提示词注入(Prompt Injection)攻击?

什么是提示词注入(Prompt Injection)攻击? 文章目录 一. 什么是提示词注入(Prompt Injection)?二. 参考文献一. 什么是提示词注入(Prompt Injection)? 想花1美元买一辆新SUV吗?有人真的尝试过这样做。事实上,他们在一家特定汽车经销商的网站聊天机器人上进行了尝试。为了…

Shell路径变量切割

目录 使用参数扩展来切割路径 1. 获取文件名部分 2. 获取目录部分 3. 获取文件扩展名 4. 获取没有扩展名的文件名 使用命令行工具来切割路径 1. 获取文件名 basename 2. 获取目录名 dirname 总结&#xff1a; # 和 ## 用于删除字符串前缀 % 和 %% 用于删除字符串后缀…

HCIA--OSPF实验(复习)

实验拓扑&#xff1a; 实验思路&#xff1a; 1.规划IP&#xff0c;配置环回&#xff0c;接口IP 2.把R1&#xff0c;R2优先级改为0&#xff0c;让R1、R2放弃选举&#xff0c; [r1]interface g0/0/0 [r1-GigabitEthernet0/0/0]ospf dr-priority 0 <r1>reset ospf…

C语言:IO操作

引言 I/O操作是一切实现的基础。IO即为input &output 标准IO&#xff08;stdio&#xff09; FILE类型贯穿始终&#xff0c;FILE是由typedef定义出来的 vii /usr/include/asm-generic/errno-base.h (errno定义的位置) /usr/include/x86_64-linux-gnu/bits/types/struct…

12-从URL到页面:探寻Web页面渲染的全过程

从URL到页面&#xff1a;探寻Web页面渲染的全过程 笔记分享 在我们浏览网页时&#xff0c;从输入URL到最终页面呈现在浏览器上&#xff0c;这背后发生了一系列复杂的步骤。本文将详细介绍这个过程&#xff0c;包括TCP连接的建立与终止。 1. DNS解析 当你在浏览器中输入一个U…

工业自动化喷涂生产线设计方案

利用机械臂代替人工进行喷涂工艺生产线的设计实现方案可以减少人工成本&#xff0c;同时提高整厂自动化程度&#xff0c;提高生产效率&#xff0c;改善工人办公环境&#xff0c;本文简单介绍如何利用机械臂代替人工进行自动化喷涂生产线设计。 整体布置包括利用三台埃夫特机械臂…

Github 2024-06-04 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-04统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10Shell项目1TypeScript项目1yt-dlp: 一个增强版的youtube-dl分支 创建周期:1184 天开发语言:Python协议类型:The UnlicenseStar数…

数据结构——哈希表、哈希桶

哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较&#xff0c;顺序查找时间复杂度为O(N),平衡树中为树的高度,即O(logN),搜索的效率取决于搜索过程种元素的比较次…

ElasticSearch学习笔记之一:介绍及EFK部署

1. 系统概述 The Elastic Stack&#xff0c;包括Elasticsearch、Kibana、Beats和Logstash&#xff08;也成为ELK Stack&#xff09; Elasticsearch&#xff1a;简称ES&#xff0c;是一个开源的高扩展的分布式全文搜索引擎&#xff0c;是整个Elastic Stack技术栈的核心。它可以…

docker安装redis以及持久化

为了避免当虚拟机关机后redis数据丢失的情况&#xff0c;redis需要持久化。所以要挂载数据卷 创建数据和配置存放的目录 [root192 data]# pwd /root/data [root192 data]# mkdir -p /root/data/redis/conf && chmod 777 /root/data/redis/conf [root192 data]# mkdir …

Ant Design Vue 动态表头并填充数据

在使用 Ant Design Vue 动态生成表头并填充数据时&#xff0c;你需要以下几个关键步骤&#xff1a; 1. **安装 Ant Design Vue**&#xff1a; 确保你已经安装并配置了 Ant Design Vue。 bash npm install ant-design-vue 2. **引入 Ant Design Vue 组件**&#xff…

怎么找抖音视频素材?下载抖音的素材视频网站分享给你

在这个视觉印象至关重要的时代&#xff0c;选用高质量的视频素材对于制作抖音视频来说是关键。如果你正在寻找适合的视频素材来丰富你的抖音创作&#xff0c;以下这份详细的视频素材网站指南将帮助你迈出第一步。 蛙学府网 蛙学府网提供了丰富多样的视频素材&#xff0c;包括动…

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别 一、香橙派简介1.1、香橙派 AI Pro 硬件资源介绍1.2、华为昇腾310&#xff08;Ascend310&#xff09; 简介1.3、 昇腾310AI能力和CANN 简介昇腾310 NPU简介 二、远程环境配置2.1、ssh2.2、vnc…

深入理解 Python3 函数:从基础语法到高级应用

Python3 函数是构建模块化代码的基本单位&#xff0c;允许我们将代码组织成独立的、可重用的块。本文将详细介绍 Python3 函数的基本语法、常用命令、示例、应用场景、注意事项&#xff0c;并进行总结。 基本语法 在 Python 中&#xff0c;函数的定义使用 def 关键字&#xf…

VScode中Markdown图片尺寸大小调整

自存用&#xff0c;不保证适用于所有人 默认情况 ![图片描述](2024-06-03-11-57-36.png)图片居中且改变尺寸 <div aligncenter><img src"2024-06-02-15-09-50.png" width"400"></div>"2024-06-02-15-09-50.png"是图片链接&…

HTML5 Canvas 绘图教程二

在本教程中&#xff0c;我们将探讨 canvas 的高级用法&#xff0c;包括复杂的绘图 API、坐标系统和变换操作、平滑动画技术以及复杂应用和游戏开发的实践。 1. 绘图 API 高级方法 1.1 二次贝塞尔曲线 (quadraticCurveTo) 二次贝塞尔曲线需要两个点&#xff1a;一个控制点和一…