vue3学习(一)---新特性

news2024/12/23 8:13:57

文章目录

  • vue3和vue2的区别
    • 重写双向数据绑定
    • 优化Vdom性能瓶颈
      • patch flag 优化静态树
    • Fragment
    • Tree shaking
    • 组合式API写法

vue3和vue2的区别

在这里插入图片描述

重写双向数据绑定

vue2
基于Object.defineProperty()实现
 
vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势:
 
//丢掉麻烦的备份数据
//省去for in 循环
//可以监听数组变化
//代码更简化
//可以监听动态新增的属性;
//可以监听删除的属性 ;
//可以监听数组的索引和 length 属性;
 
    let proxyObj = new Proxy(obj,{
        get : function (target,prop) {
            return prop in target ? target[prop] : 0
        },
        set : function (target,prop,value) {
            target[prop] = 888;
        }
    })
  1. vue2是基于Object.defineProperty()实现的,为了数据劫持vue内部重写了数组的pop、push等方法,缺点修改数组的length或者通过索引修改数据是无法劫持到变化的。
  2. vue3是基于Proxy()实现的,可以直接监听到数组的索引和length修改的变化。

优化Vdom性能瓶颈

在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

在这里插入图片描述

patch flag 优化静态树

 
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>{{msg}}</span>
<span>Hello world!</span>
<span>Hello world! </span>

vue3 编译后的 Vdom 是这个样子的

export function render(_ctx,_cache,$props,$setup,$data,$options){return (_openBlock(),_createBlock(_Fragment,null,[
_createvNode( "span", null,"Hello world ! "),
_createvNode( "span",null,"Hello world! "),
_createvNode( "span",null,"Hello world! "),
_createvNode( "span", null,"Hello world! "),
_createVNode("span", null,_toDisplaystring(_ctx.msg)1/* TEXT */)_createvNode( "span", null,"Hello world! "),
_createvNode( "span", null,"Hello world! ")]64/*STABLE_FRAGMENT */))

新增了 patch flag 标记

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2// 4 //动态style
PROPS=1<<3,// 8 //动态属性,但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性,当key改变时,需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

我们发现创建动态 dom 元素的时候,Vdom 除了模拟出来了它的基本信息之外,还给它加了一个标记: 1 /* TEXT */

这个标记就叫做 patch flag(补丁标记)

patch flag 的强大之处在于,当你的 diff 算法走到 _createBlock 函数的时候,会忽略所有的静态节点,只对有标记的动态节点进行对比,而且在多层的嵌套下依然有效。

尽管 JavaScript 做 Vdom 的对比已经非常的快,但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升,尤其是在针对大组件的时候。


Fragment

vue3 允许我们支持多个根节点,vue3内部已经在创建了虚拟包裹根节点,所以不用像vue2那样只有一个根节点了

<template>
  <div>12</div>
  <div>23</div>
</template>

同时支持render JSX 写法

render() {
        return (
            <>
                {this.visable ? (
                    <div>{this.obj.name}</div>
                ) : (
                    <div>{this.obj.price}</div>
                )}
                <input v-model={this.val}></input>
                {[1, 2, 3].map((v) => {
                   return <div>{v}-----</div>;
                })}
            </>
        );
    },
 

同时新增了Suspense teleport多 v-model 用法


Tree shaking

import {ref,reactive} from 'vue' 

简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码

在Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到

Vue3源码引入tree shaking特性,将全局 API 进行分块。如果你不使用其某些功能,它们将不会包含在你的基础包中

就是比如你要用watch 就是import {watch} from 'vue' 其他的computed 没用到就不会给你打包减少体积


组合式API写法

vue3是兼容vue2optionsAPI(选项式API)的写法,在此基础上新增了compositionAPI(组合式API)

compositionAPI的好处是可以将相关的逻辑处理都在一块区域内编写,不用像optionsAPI那样data、methods等分开写,这样更方便代码的阅读和维护。
如下图就能看出compositionAPI的写法将内容区分的很好。

在这里插入图片描述

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

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

相关文章

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架&#xff0c;其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集&#xff0c;本文主要描述bootstrapjs的开发环境搭建。 如上所示&#xff0c;使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…

直流无刷电机简介

一、 简介 直流无刷电机&#xff08;简称BLDC&#xff09;是随着半导体电子技术发展而出现的机电一体化电机&#xff0c;是永磁式同步电机的一种。 直流无刷电机与直流有刷电机的区别&#xff1a;直流有刷电机利用电枢绕组旋转换向&#xff1b;直流无刷电机是采用半导体开关器…

全局变量报错:\Output\STM32.axf: Error: L6218E: Undefined symbol

全局变量报错&#xff1a; .\Output\STM32.axf: Error: L6218E: Undefined symbol key_num (referred from main.o). 这里只说全局变量哦&#xff0c;这是因为你在调用的.c文件里 把定义写在了函数里面&#xff0c;写函数外面就没事了 改为&#xff1a; .h的声明文件根本不用写…

openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw

文章目录 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw94.1 编译mysql_fdw94.2 使用mysql_fdw94.3 常见问题94.4 注意事项 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw openGauss的fdw实现的功能是各个openGauss数据库及远程…

vue3中的父子组件传递slot的方式

缘起 目前的 vue3 工程&#xff0c;有处相似的地方&#xff0c;上面是一个 a-step 组件&#xff0c;下面是一个 vxetable 的组件&#xff0c;目前有好几处都是各自复制这两个组件&#xff0c;进行各自的处理。所以就要把这处&#xff0c;改成一个组件&#xff0c;供小伙伴们使用…

什么是列间空调?

列间空调&#xff08;Chilled Beam Air Conditioning System&#xff09;是一种先进的空调系统&#xff0c;用于办公室和商业建筑等高要求的室内空间。这种系统采用创新的工作原理&#xff0c;结合空气对流和辐射的方式&#xff0c;提供高效的舒适空调效果。 列间空调系统的工作…

从零开始读懂相对论:探索爱因斯坦的科学奇迹

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 引言 阿尔伯特爱因斯坦…

STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

文章目录 1.ADC与DMA初始化顺序导致使用Freemodbus串口通信异常&#xff1a;2.通信异常时串口初始化的顺序为&#xff1a;3.重新调整初始化位置后&#xff0c;通信问题解决&#xff1a;5.重新调整初始化位置后&#xff0c;通信正常&#xff1a;总结&#xff1a;Cube开发库系统默…

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测,并附录完整代码。。 自从You Only Look Once(简称 YOLO)的诞生以来,目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言,它是通过在…

手动快速批量修改文件名

方法一 1.选中需要批量修改的文件&#xff0c;如图1 图1 2.按F2键&#xff0c;输入文件名。如图2. 图2 3.Enter&#xff0c;效果如图3. 图3 方法二 1.新建记事本文档&#xff0c;输入如下代码。如图4. DIR . /B>文件名列表.csv 含义是&#xff1a;提取出带有“.”的文…

06-Zookeeper选举Leader源码剖析(一)

上一篇&#xff1a;05-Zookeeper典型使用场景实战 一、为什么要看源码 提升技术功底&#xff1a;学习源码里的优秀设计思想&#xff0c;比如一些疑难问题的解决思路&#xff0c;还有一些优秀的设计模式&#xff0c;整体提升自己的技术功底深度掌握技术框架&#xff1a;源码看…

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY 目录 所遇问题 有些时候我们用命令进行安装apk如下&#xff1a; adb install xxx.apk但是会安装不成功&#xff0c;报如下错误&#xff1a; 错误现象&#xff1a;提示&#xff1a;Failed to install app-d…

【Go】Fyne跨平台图形界面框架使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Fyne跨平台图形界面框架使用。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新…

文本编辑器去除PDF水印

用文本编辑器打开pdf&#xff0c;搜索水印的特殊文字&#xff0c;全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf&#xff1a;

国产麒麟V10桌面操作系统上运行WinForm程序

将需要运行的程序拷贝到系统中&#xff0c;如图&#xff1a; 选择exe后点击鼠标右键&#xff0c;选择打开方式&#xff0c;然后选择CrossOver(安装)&#xff0c;如图&#xff1a; 打开CrossOver 软件安装程序后&#xff0c;点击选择容器&#xff0c;然后选择Windows 10 容器…

交互式ICP

以下程序演示如何编写交互式ICP查看器。该程序将加载点云并对其进行刚性变换。之后&#xff0c;使用ICP算法将变换后的点云与原来的点云对齐。每次用户按下“空格”&#xff0c;进行ICP迭代&#xff0c;刷新可视化界面。 代码实现 资源准备 monkey.ply #include <string&…

用Python简单的实现一下六大主流小说平台小说下载(附源码)

很多小伙伴学习Python的初衷就是为了爬取小说&#xff0c;方便又快捷~ 辣么今天咱们来分享6个主流小说平台的爬取教程~ 一、流程步骤 流程基本都差不多&#xff0c;只是看网站具体加密反爬&#xff0c;咱们再进行解密。 实现爬虫的第一步? 1、去抓包分析&#xff0c;分析数…

从零开始:制作出色的产品原型图的详细教程

在设计产品的初始版本或模型时&#xff0c;产品原型起着非常重要的作用&#xff0c;可以帮助设计师和团队更好地了解产品需求和用户需求&#xff0c;优化和改进设计&#xff0c;确保设计最终满足用户的需求和期望。如果你不知道如何绘制产品原型图&#xff0c;绘制产品原型图的…

应用开发平台集成工作流系列之14——流程表单实现示例

背景 流程审批&#xff0c;通常对应一个业务表单。这个表单一般有两种实现模式&#xff0c;一是不同的环节对应不同表单&#xff0c;二是做一张大表单&#xff0c;分为不同的区域&#xff0c;从业务角度考虑&#xff0c;前者通常对应复杂业务处理&#xff1b;后面一种则更常见…

苹果手机如何设置软件提醒功能?苹果手机哪个软件有提醒功能?

作为苹果手机用户&#xff0c;我们都希望能够准时接收待办事项或日程提醒&#xff0c;高效完成各项任务和待办事项&#xff0c;例如无论是工作中的重要会议&#xff0c;还是生活中的约会安排&#xff0c;我们都不能够忘记。那么苹果手机如何设置软件的提醒功能呢&#xff1f;苹…