Vue3+TypeScript 学习回顾,温故而知新

文章简介: 

(1)简介:

在 Vue3 中编码规范如下:

  • 编码语言: JavaScript
  • 代码风格: 组合式API选项式、API
  • 简写形式: setup语法糖

 

(2)复习内容: 

1.核心: ref、reactive、computed、watch、生命周期

2.常用: hooks、自定义ref、路由、pinia、mitt···

3.面试: 组件通信、响应式相关API.


1.Vue3简介

2020年9月18日,Vue.js 发布版3.0版本,代号: Onepiece(海贼王)
经历了: 4800+次提交、40+个RFC、600+次PR、300+贡献者
官方发版地址: Release v3.0.0 One Piece·vuejs/core
截止2023年10月,最新的公开版本为: 3.3.4

1.1.性能的提升

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

1.2. 源码的升级

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

1.3.拥抱TypeScript

  • Vue3 可以更好的支持 Typescript

 1.4.新的特性
(1)Cqmposition API (组合 API )

  • setup
  • ref与reactive
  • computed与watch

(2)新的内置组件:

  • Fragment
  • Teleport
  • Suspense

(3)其他改变:

  • 新的生命周期钩子
  • data 选项应始终被声明为一个函数
  • 移除 keycode 支持作为 v-on 的修饰符

 


2.创建Vue3工程

 2.1. 基于 vue-cli 创建
备注:目前 vue-cli 已处于维护模式,官方推荐基于 Vite 创建项目。

 

2.2. 基于 vite 创建 (🌟推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下: 

轻量快速的热重载( HMR )能实现极速的服务启动。
Typescript、JSX、css 等支持开箱即用.
真正的按需编译,,不再等待整个应用编译完成。
webpack 构建与 vite 构建对比图如下:

 

相关推荐

  1. 故而】HTML5 WebSocket

    2024-03-17 05:02:03       23 阅读
  2. 故而】探讨下对vue的mixin的理解

    2024-03-17 05:02:03       36 阅读
  3. 故而】HTML5标签canvas、MathML

    2024-03-17 05:02:03       33 阅读
  4. 故而】HTML5的Video/Audio

    2024-03-17 05:02:03       30 阅读
  5. 故而】HTML5存储localStorage/sessionStorage

    2024-03-17 05:02:03       42 阅读
  6. 故而】HTML5的Web Worker

    2024-03-17 05:02:03       38 阅读
  7. 故而】HTML5 应用程序缓存

    2024-03-17 05:02:03       37 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-17 05:02:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-17 05:02:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-17 05:02:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-17 05:02:03       18 阅读

热门阅读

  1. wsl-oraclelinux 固定ip

    2024-03-17 05:02:03       19 阅读
  2. 2024计算机二级6

    2024-03-17 05:02:03       19 阅读
  3. Invalid value type for attribute ‘factoryBeanObjectType‘

    2024-03-17 05:02:03       16 阅读
  4. 189: 素数判定(python)

    2024-03-17 05:02:03       15 阅读
  5. 2024.2.20 校招 实习 内推 面经

    2024-03-17 05:02:03       18 阅读
  6. HashMap常用方法

    2024-03-17 05:02:03       18 阅读
  7. C语言自学笔记19----结构体函数

    2024-03-17 05:02:03       19 阅读
  8. 实现快速排序所踩的坑

    2024-03-17 05:02:03       16 阅读
  9. P8706 [蓝桥杯 2020 省 AB1] 解码 Python

    2024-03-17 05:02:03       18 阅读
  10. CS255#1代码

    2024-03-17 05:02:03       19 阅读
  11. Python 数据结构与算法

    2024-03-17 05:02:03       22 阅读