工作记录:Vue3.0新特性
简单对比 Vue2.x 与 Vue3.x 响应式
Vue2 使用Object.defineProperty
劫持对象的属性
Vue3 使用Proxy 直接代理对象
由于Object.defineProperty
只能劫持对象属性,需要遍历对象的每一个属性,如果属性值也是对象,就需要递归进行深度遍历。但是 Proxy 直接代理对象, 不需要遍历操作
Fragment
在 Vue2.x 中, template
中只允许有一个根节点
但是在 Vue3.x 中,你可以直接写多个根节点,
Teleport
Teleport和Vue2中的Solt类似,但是不同的点在于渲染的 DOM 结构不嵌套在组件的 DOM 中
- 举个栗子
我们实际开发中经常会在类似的情形下使用到 Dialog
,此时Dialog
就被渲染到一层层子组件内部,处理嵌套组件的定位、z-index
和样式都变得困难。这时候我们就可以用到Teleport
首先在index.html中定义一个供挂载的元素
定义一个Dialog
组件Dialog.vue
, 留意 to
属性, 与上面的id
选择器一致
然后使用这个Dialog
组件
Dom 渲染效果如下
Composition API
- setup( )
Vue3.x 新增的一个选项, 他是组件内使用 Composition API
的入口
reactive、ref 与 toRefs
ref :主要用来处理 js 基本类型 如number string ,也能处理对象单用起来比较复杂
reactive :用于对象的双向绑定 ,但是不能代理基本类型,例如字符串、数字、boolean 等
toRefs:可以将reactive()创建出来的响应式对象,转换为普通对象,只不过这个对象上的每个属性节点,都是ref()类型的响应式数据
生命周期钩子
Watch
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
工作记录:Vue3.0新特性的更多相关文章
- Vue3.0新特性
Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...
- vue3.0新特性以及进阶路线
Vue3.0新特性/改动 新手学习路线 ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...
- C# 9.0 新特性之只读属性和记录
阅读本文大概需要 2 分钟. 大家好,这是 C# 9.0 新特性系列的第 4 篇文章. 熟悉函数式编程的童鞋一定对"只读"这个词不陌生.为了保证代码块自身的"纯洁&quo ...
- 【c#】6.0与7.0新特性介绍记录
c#发展史 引用地址:https://www.cnblogs.com/ShaYeBlog/p/3661424.html 6.0新特性 1.字符串拼接优化 语法格式:$”string {参数}” 解释: ...
- [翻译] C# 8.0 新特性
原文: Building C# 8.0 [译注:原文主标题如此,但内容大部分为新特性介绍,所以意译标题为 "C# 8.0 新特性"] C# 的下一个主要版本是 8.0.我们已经为它 ...
- [翻译] C# 8.0 新特性 Redis基本使用及百亿数据量中的使用技巧分享(附视频地址及观看指南) 【由浅至深】redis 实现发布订阅的几种方式 .NET Core开发者的福音之玩转Redis的又一傻瓜式神器推荐
[翻译] C# 8.0 新特性 2018-11-13 17:04 by Rwing, 1179 阅读, 24 评论, 收藏, 编辑 原文: Building C# 8.0[译注:原文主标题如此,但内容 ...
- android6.0、7.0、8.0新特性总结之开发应用时加以考虑的一些主要变更。
android6.0 参考一:简书Android 6.0 新特性详解 参考二:关于Android6.0以上系统的权限问题 参考三:值得你关注的Android6.0上的重要变化(一) 参考四:值得你关注 ...
- Redis4.0新特性
redis 4.0 新特性 Redis 4.0在2017年7月发布为GA.包含几个重大改进:更好的复制(PSYNC2),线程DEL / FLUSH,混合RDB + AOF格式,活动内存碎片整理,内存使 ...
- Android 7.0新特性
还望支持个人博客站:http://www.enjoytoday.cn 由于google目前不是无法直接在国内访问,故此,对于android 开发平台的7.0新特性做个保存.也可供大家查阅.原文转自an ...
- 【mysql】mysq8.0新特性
一.MySQL8.0简介 mysql8.0现在已经发布,2016-09-12第一个DM(development milestone)版本8.0.0发布.新的版本带来很多新功能和新特性,对性能也得到 ...
随机推荐
- ABC 314
F 每次相当于创建一个包含 \(p_i,q_i\) 各自所在集合的点的大点 \(u\),然后 \(u\) 向 \(p_i,q_i\) 各自所在集合连边,边权就是胜率. 连完之后求每个点到根结点(\(\ ...
- 吉特日化MES 与周边系统集成架构
作者:情缘 出处:http://www.cnblogs.com/qingyuan/ 关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路 版权声明:本文版权归作者和博客园 ...
- 深入读懂 Kafka集群
前言 概述 Kafka是一个多分区.多副本的分布式流处理平台,以高吞吐.可持久化.可水平扩展.支持流数据处理等多种特性被广泛使用. 应用场景 (1)缓冲削峰:有利于解决生产消息和消费消息的处理速度不一 ...
- 解决ufw下pptp客户端连接问题
解决ufw下pptp客户端连接问题 解决ubuntu在启动ufw的情况下pptp客户端无法链接的问题. 修改/etc/ufw/before.rules 在COMMIT之前添加如下内容: -A ufw- ...
- java常用包下载地址(非maven)
httpclient与httpcore: http://hc.apache.org/downloads.cgi jdbc: https://dev.mysql.com/downloads/connec ...
- 利用javax.validation实现对bean属性校验
1.使用场景介绍 controller层对传入的bean的属性进行非空.属性长度等合法性的校验. 传统的方式是我们要自己写if-else-去判断,比较麻烦. 2.实现效果 3.代码介绍 代码结构: p ...
- [攻防世界][江苏工匠杯]file_include
打开靶机url,上来就是代码审计 <?php highlight_file(__FILE__); include("./check.php"); if(isset($_GET ...
- RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试
前言 前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用. 烧写buildroot固件 这部分更详细的参照<RK3568开发笔 ...
- 【.Net Core】.Net Core 源码分析与深入理解 - 入口 Program.cs (一)
研究原因:学习 .Net Core 两年有余,实际项目也使用了一年半,自己的技术已经到了瓶颈,需要有一个突破,我觉得首先研究架构师的设计思想,其次分析一下.Net Core的源码,这将会是一个很好的学 ...
- Postman/Jmeter工具实现接口测试,为什么还要用代码来实现接口自动化测试?
这种工具包括一些开源框架最大缺点就是不够灵活,如果是单接口的测试还行,但是有的项目接口比较庞大和负责,这种情况下就不大适用工具(工具适用于小型项目,代码适用于中大型项目) 主要有以下几个原因: 1敏捷 ...