vue3简介

发表于2022-01-04

1. Vue3简介

2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n
经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址：Release v3.0.0 One Piece · vuejs/core

2. Vue3对比Vue2

1.1. 【性能的提升】

打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。

1.2.【源码的升级】

使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。

1.3. 【拥抱TypeScript】

Vue3可以更好的支持TypeScript。

1.4. 【新的特性】

Composition API（组合API）：
- setup
- ref与reactive
- computed与watch
  
  ……
新的内置组件：
- Fragment
- Teleport
- Suspense
  
  ……
其他改变：
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
  
  ……

文章作者: admin

文章链接: https://blog.p0.ee/2022/01/04/vue/vue3%E7%AE%80%E4%BB%8B/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源！

相关推荐

01：JS基础一、JavaScript 介绍网页的组成：结构html，样式css，行为js html：超文本标记语言 css：层叠样式表 javascript：网页的脚本语言，用来描述网页的逻辑交互行为是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。 javascript的组成：ECMAScript，DOM，BOM ECMAScript：语法，规范，标准，定义了javascript的语法规范,描述了语言的基本语法和数据类型。用来约束代码用什么样的格式书写，写什么，如何执行 DOM（Document Object Model）：文档对象模型，document，表示网页。提供了网页的相关操作，标准化组织是W3C。有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。如：增加元素，删除元素，改变元素位置等 BOM（Browser Object...

02：分支一、程序结构顺序结构：默认的程序执行顺序，从上到下依次执行分支结构：根据程序执行过程中可能产生的不同信息，决定执行不同的功能配合分支语句循环结构：根据执行条件重复执行某个功能配合循环语句二、分支语句单分支：if(){} 根据条件决定执行或不执行 123456789101112// if(){}// if 语句名，关键字// () 执行条件// {} 执行条件符合时（true），要执行的代码console.log(1);if( true ){ console.log("hello");}console.log(2); 双分支：if(){}else{} 根据条件决定执行A或执行B 12345678910111213141516// if(){}else{} // if 语句名1，关键字 // () ...

03：循环一、循环结构介绍循环结构存在的意义计算1+2+3+……+1000的和需要向计算机输入重复的命令节省向计算机输入命令的时间，并没有提升性能循环结构的三要素创建（初始化）计数器执行条件计数器的改变死循环：无法通过自身控制结束的循环瞬间占用大量性能，造成计算机死机，程序崩溃尽量避免产生死循环但可以利用死循环解决无法确定重复执行次数的问题二、循环语句 while 循环语句 1234567891011// while(){} // while 语句名，关键字 // () 执行条件 // {} 当执行条件为true时，要重复执行的语句// 打印10次hellovar i = 0;while(i < 10){ console.log("hello"); i++;} do...while 循环语句 123456789101112//...

04：函数一、函数的基本概念函数的概念函数，即功能。将实现了某个功能的代码，集中起来，通过函数语句进行封装，封装之后，可以选择直接执行或行为的代码段。函数是一种数据类型：function 对象：数据的打包，函数：代码的打包函数最大的意义：封装功能函数的特点：重复使用选择使用忽略细节二、函数的使用创建函数声明式：使用function关键字创建函数 function 函数名(){} var 变量名赋值式：配合变量，赋个函数值，将函数作为一个值或表达式使用 var 变量名 = function(){} 将函数作为值使用 123456789// 固定语法：// function 函数名(){} // function：声明关键字，用来声明函数 // 函数名 // ()：参数，函数的入口 // {}：函数体，内放置要封装的代码function fn(){ console.log("hello js");} 使用函数...

05：对象一、对象的概念和特点对象：是一种复杂数据，是数据的打包形式无序集合，object对象，花括号形式以键值对的形式存在，键和值一一对应，使用冒号连接，键值对之间使用逗号隔开键：key，要遵守变量的命名规则，一个对象中不允许出现重复的键值：value，就是正常数据使用场景：一般用来打包非同类但属于同一个个体的数据一个班级中某一个学生的所有信息姓名，性别，年龄，手机号，住址有序集合，array对象，中括号形式数据之间默认以索引的形式，进行标记，索引从0开始，到length-1 使用场景：一般用来打包同类数据一个班级所有学生的姓名姓名，姓名，姓名特点：提升了数据的查找速度提升了数据的传输速度本质：键值对键和值成对出现，键和值使用冒号连接，键值对之间使用逗号隔开，使用花括号做包裹 {name:"admin",age:18,sex:"男"} 意义存储数据编程（面向对象编程）二、对象的创建字面量：var obj = {...

06：数组一、数组的概念和特点数组是对象的一种，数组内的数据会按照顺序进行排列，是一种有序集合数据按照顺序被标记，序号，也叫索引，从0开始 arr[0] 数组拥有length属性，用来表示自身有多少个数据 arr.length 因为索引的规律为从0开始递增，通过length属性标记数据总数，所以可以通过循环语句遍历数组 123for(var i=0; i<arr.length; i++){ console.log( arr[i] );} 二、数组的创建字面量：var arr1 = [数据1, 数据2, 数据3, ...]; 创建函数：var arr2 = new Array(数据1, 数据2, 数据3, ...); 区别：当有且只有一个数值型数据时，字面量创建就是作为一个数据，构造函数创建会作为数组的长度，每个位置为undefined 三、数组的操作索引+长度操作原生操作，底层操作，所有数组操作功能的基础查：arr[索引] 改：arr[索引] = "新值" 增：默认只能在数组的最后增加...

评论