Vue学习:Vue中的数据代理

news/2024/10/31 2:23:13/
  <!-- 准备容器 --><div id='root'> <h2>学校名称:{{name}}</h2><h2>学校地址:{{adress}}</h2></div><script>const vm= new Vue({ el: '#root',data: {name:'Jhon',adress:'street 10'},});</script>

vm上有我们加上的属性,可以看到有...,经过前面的学习我们知道是通过 Object.defineProperty的get和set读和改的

 

这就是数据代理,通过name读的是data的name,改的也是data的name


如果有人读取name,那么getter工作,将data.name给的

如果有人通过vm改变name,那么setter工作,将改变的值赋给data.name


验证:get vm读取date.name属性

 

set:vm设置 data.name(如何观察到data的数据——目前的data是局部变量 无法访问)

但是vm里面有一个属性:_data 与vue实例里面的data有关系

        let data = {name: 'Jhon',adress: 'street 10'}const vm = new Vue({el: '#root',// data:data 触发对象简写形式data});

vm._data=options.data  {options是配置项} =data {外面定义的变量}

 

直接改的data的数据,然后data数据引起页面的变化 

 

 验证vm修改data.name

 vm.data===》setter====》data-----页面变化

在{{}}可以通过实例属性访问 

 

 数据代理:通过vm.name---与_data.name变化通过setter

修改_data.name等于页面上的{{name}}全部发生改变,所以Vue需要监测_date中的数据是否发生改变。数据劫持

 


Vue中的数据代理:

        通过vm对象来代理data对象中属性的操作(读/写)

Vue中数据代理的好处

        更加方便的操作data中的数据

基本原理:

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


http://www.ppmy.cn/news/2568.html

相关文章

计算机的硬件系统和软件系统的关系

计算机的硬件系统和软件系统的关系是缺一不可。 硬件它是所有软件运行的物质基础。 与硬件直接接触的是操作系统&#xff0c;它处在硬件和其他软件之间&#xff0c;表示它向下控制硬件&#xff0c;向上支持其他软件。 在操作系统之外的各层分别是各种语言处理程序、数据库管理…

【C++ unordered_set set 和 unordered_map 和 map】

文章目录前言简单介绍哈希表&#xff0c;哈希结构什么时候用哈希表unordered_map操作likou第一题 两数之和unordered_set 基础操作unordered_set 实现总结前言 今天重新打开力扣&#xff0c;看到以前的签到题两数之和&#xff0c;以前的方法是双指针暴力解法&#xff0c;偶然看…

nginx 正向代理http和https

nginx正向代理默认只支持http&#xff0c;不支持https&#xff0c;需借助第三方模块“ngx_http_proxy_connect_module”来实现&#xff08;https://github.com/chobits/ngx_http_proxy_connect_module&#xff09; yum -y install make zlib zlib-devel gcc-c libtool openss…

设计模式-day03

5&#xff0c;结构型模式 结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式&#xff0c;前者采用继承机制来组织接口和类&#xff0c;后者釆用组合或聚合来组合对象。 由于组合关系或聚合关系比继承关系耦合度低&#xff0c;满足“…

JAVA毕业设计惠济区疫情期间监测管理系统计算机源码+lw文档+系统+调试部署+数据库

JAVA毕业设计惠济区疫情期间监测管理系统计算机源码lw文档系统调试部署数据库 JAVA毕业设计惠济区疫情期间监测管理系统计算机源码lw文档系统调试部署数据库本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea e…

Java ssh框架 mysql实现的进销存管理系统源码+运行教程+文档

今天给大家演示一下一款由sshmysql实现的进销存管理系统&#xff0c;其中struts版本是struts2&#xff0c;这个系统的功能非常完善&#xff0c;简直可以说是牛逼&#xff0c;到了可以用于企业直接商用的地步&#xff0c;此外该项目还带有完整的论文&#xff0c;是Java学习者及广…

java基础巩固-宇宙第一AiYWM:为了维持生计,架构知识+分布式微服务+高并发高可用高性能知识序幕就此拉开(二:网关balabala)~整起

上集&#xff0c;在架构知识分布式微服务高并发高可用高性能知识序幕就此拉开&#xff08;一&#xff1a;总览篇&#xff09;中&#xff0c;说到了 当用户请求过来时&#xff0c;这个请求或者说URL先到服务调用端【咱们之前的项目中的Controller其实就算是一个服务调用方&#…

c++状态机的使用

什么是状态机 状态机是有限状态自动机的简称&#xff0c;是现实事物运行规则抽象而成的一个数学模型。英文名字叫State Machine &#xff0c;不是指一台实际机器&#xff0c;一般就是指一张状态转换图。全称是有限状态自动机&#xff0c;自动两个字包含重要含义。给定一个状态…