vue基础语法学习

Object.defineProperty方法的使用

在这里插入图片描述
在这里插入图片描述

// 这是一个普通的对象
let phone = {}
// 给这个phone新增一个属性 三个参数:新增属性的对象,新增啥属性,属性值,key value对
Object.defineProperty(phone,'color',{value:'太空灰', //设置属性值writable:true,// 指明这个属性是否可以赋值// 当配置项中由setter和getter的时候上面的value和writable属性都不能写// getter方法配置项 当读取属性值的时候这个方法被自动调用get:function() {},// setter方法配置项 这个属性被重新赋值的时候被自动调用set: function() {}}
)

数据代理机制

什么是数据代理机制?

  1. 通过访问代理对象的属性来间接访问目标对象的值。数据代理机制的实现靠的就是上面所说的Object.defineProperty()方法。
  2. vue实例可以直接.属性的原理就是数据代理机制。
// target object
let target = {name:'张三'
}// proxy object
let proxy = {}// if we want to achieve proxy mechanism, we should add 'name' property to proxy
// attention: proxy property must be same as target object ,for example:'name'
Object.defineProperty(proxy, 'name', {get : function(){// indirct access to target objectreturn target.name;},set: function(val) {target.name = val}
})// es6 新特性 对象中的函数或方法:可以省略

在这里插入图片描述

注意:vue实例的代理机制的属性名是有要求的,下划线和美元符开头的一般是vue内部用的。vue不会代理_和\$开头的属性。不然就会有可能导致vue内部使用的变量被覆盖。
在这里插入图片描述
在这里插入图片描述

手写vue数据代理部分实现

Object是js中的类。
在这里插入图片描述
看vue的源码
在这里插入图片描述

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

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

相关文章

Axure糖尿病健康管理APP原型 (知识科普/病友社区/远程医生会诊/购物商城/血糖监测/饮食监测)

作品概况 页面数量:共 50 页 源文件格式:rp格式,兼容 Axure RP 9/10,非程序软件无源代码 应用领域:医疗健康、慢病管理、糖尿病管理 作品特色 本作品为Axure糖尿病健康管理APP端原型图,设计规范内容清晰…

深度解读《深度探索C++对象模型》之C++虚函数实现分析(一)

目录 成员函数种类 虚函数的实现 单一继承下的虚函数 接下来我将持续更新“深度解读《深度探索C对象模型》”系列,敬请期待,欢迎关注!也可以关注公众号:iShare爱分享,或文章末尾扫描二维码,自动获得推文…

邮件接口的安全性如何保障?如何有效使用?

邮件接口故障时如何处理?怎么设置和配置邮件接口? 邮件接口作为企业内外部沟通的重要桥梁,其安全性显得尤为重要。那么,邮件接口的安全问题如何保障。AokSend将深入探讨如何保障邮件接口的安全性,确保企业信息的安全传…

什么是仪器校准报告?

在科学实验和工业生产中,仪器是一种非常重要的辅助工具,无论是测量数据、控制实验进程还是保证产品质量,仪器都发挥着至关重要的作用。为了确保仪器的准确性和稳定性,仪器校准报告这一概念应运而生。本文给大家详细介绍仪器校准报…

科研基础与工具(论文写作)

免责申明: 本文内容只是学习笔记,不代表个人观点,希望各位看官自行甄别 参考文献 科研基础与工具(YouTube) 学术写作句型 Academic Phrase bank 曼彻斯特大学维护的一个网站 写论文的时候,不不知道怎么…

简单使用Web3.js

随着区块链技术的快速发展,以太坊(Ethereum)作为其中的佼佼者,为开发者们提供了一个构建去中心化应用的强大平台。为了更轻松地与以太坊区块链进行交互,我们需要一个强大的工具,而Web3.js正是这样一个工具。…

【Linux】IO多路转接技术Epoll的使用

【Linux】IO多路转接技术Epoll的使用 文章目录 【Linux】IO多路转接技术Epoll的使用前言正文接口介绍工作原理LT模式与ET模式边缘触发(ET)水平触发(LT) 理解ET模式和非阻塞文件描述符ET模式epoll实现TCP服务器简单地封装epoll系统…

【软件测试】认识测试|测试岗位|软件测试和开发的区别|优秀的测试人员需要具备的素质

一、什么是测试 测试在⽣活中处处可⻅ 1.生活中的测试场景 案例⼀:对某款购物软件进⾏测试 *启动测试:点击软件图标,测试软件是否可以正常打开 搜索测试:点击输入框,输入关键词,点击搜索 商品测试&#…

【数据结构】图论(图的储存方式,图的遍历算法DFS和BFS、图的遍历算法的应用、图的连通性问题)

目录 图论一、 图的基本概念和术语二、图的存储结构1. 数组(邻接矩阵)存储表示无向图的数组(邻接矩阵)存储表示有向图的数组(邻接矩阵)存储表示 邻接表存储表示有向图的十字链表存储表示无向图的邻接多重表存储表示 三、图的遍历算法图的遍历——深度优先搜索(DFS&a…

.net core webapi 添加日志管理看板LogDashboard

.net core webapi 添加日志管理看板LogDashboard 添加权限管理&#xff1a; 我们用的是Nlog文件来配置 <?xml version"1.0" encoding"utf-8" ?> <nlog xmlns"http://www.nlog-project.org/schemas/NLog.xsd"xmlns:xsi"http:/…

软考高项(已通过,E类人才)-学习笔记材料梳理汇总

软考高项&#xff0c;即软考高级信息系统项目管理师&#xff0c;全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试中的高级水平测试。适用于从事计算机应用技术、软件、网络、信息系统和信息服务等领域的专业人员&#xff0c;以及各级企业管理人员和从事项目…

Netty学习——实战篇7 ProtoBuf实战-多类型数据

1 需求&#xff1a; 1、客户端可以随机发送Student POJO 、Worker POJO 对象到服务器(通过protobuf编码) 2、服务端能接收 Student POJO 、Worker POJO 对象(需要判断是哪种类型)&#xff0c;并显示信息(通过ProtoBuf解码) 2 开发 2.1 编写proto文件 MyDate.proto syntax &…

力扣练习题(2024/4/18)

1不相交的线 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在&#xff0c;可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线&#xff0c;这些直线需要同时满足&#xff1a; nums1[i] nums2[j]且绘制的直线不与任何其他连线&#xff08;非水平线…

省级客运、货运量及周转量数据(1990-2022年)

1、数据介绍 客运量和货运量是衡量交通运输行业发展状况的重要指标&#xff0c;可以反映一个地区或国家的经济发展水平和人民生活水平。而周转量则是反映运输行业效率的指标&#xff0c;即货物或旅客被运输的总距离。 省级客运、货运量及周转量是衡量一个地区交通运输行业发展…

Excel如何计算时间差

HOUR(B1-A1)&"小时 "&MINUTE(B1-A1)&"分钟 "&SECOND(B1-A1)&"秒"

手拉手安装Kafka2.13发送和消费消息

Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。 Kafka启动方式有Zookeeper和Kraft&#xff0c;两种方式只能选择其中一种启动&#xff0c;不能同时使用。 Kafka下载https://downloads.apache.org/kafka/3.7.0/kafka_2.…

C语言 选择控制结构(1) 了解选择结构 关系运算符讲解 基本逻辑判断演示

接下来 我们来说 选择控制结构 在生活中 我们也有很多需要分支结构的例子 比如: 计算两个整数的最大值 计算n个数的最大值&#xff0c;最小值 判断三角形三边能否构成三角形? 判断某年是否是闰年? 判断输入的英文字母是大写还是小写? 我们在程序开发中 需要根据某种条件 进…

Mysql 、Redis 数据双写一致性 更新策略与应用

零、important point 1. 缓存双写一致性问题 2. java实现逻辑&#xff08;对于 QPS < 1000 可以使用&#xff09; public class UserService {public static final String CACHE_KEY_USER "user:";Resourceprivate UserMapper userMapper;Resourceprivate Re…

学生选课及成绩查询管理系统的设计与开发C#(winform + sqlserver)

源码来自网络 技术栈&#xff1a; C#的窗体程序开发 本系统未采用C#实现MDI——多文档窗口&#xff0c;因为考虑到C#的该技术与java类似&#xff0c;而暑期java实训时&#xff0c;曾用过类似的方法做过停车场管理系统&#xff0c;所以想为这次的系统注入一点新鲜的血液&#x…

HTML随机点名程序

案例要求 1.点击点名按钮&#xff0c;名字界面随机显示&#xff0c;按钮文字由点名变为停止 2.再次点击点名按钮&#xff0c;显示当前被点名学生姓名&#xff0c;按钮文字由停止变为点名 案例源码 <!DOCTYPE html> <html lang"en"> <head> <m…