Vue3-1-概述与创建项目，GitHub标星9K的Google官方MVP+Rxjava项目详解

用户33914928060
62 阅读3分钟

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：docs.qq.com/doc/DSmRnRG… 6. 使用Proxy代替defineProperty实现数据响应式

  1. 重写虚拟DOM的实现和Tree-Shaking

  2. Composition (组合) API

与Vue2的区别

===========================================================================

  1. Vue3支持大部分Vue2特性

  2. Vue3中设计了一套强大的组合API代替Vue2中的option API，复用性更强

  3. 更好支持TS

  4. Vue3中使用Proxy和Reflect代替了Vue2中的Object.defineProperty()来实现响应式数据

  5. 重写了虚拟DOM，渲染速度更快

  6. 新的组件

  • Fragment 片段（不再需要包括在根标签里）

  • Teleport 瞬移（到达指定HTML标签处）

  • Suspense 不确定（异步任务时友好显示）

  1. 新的脚手架工具Vite

创建Vue3项目

===========================================================================

使用 vue-cli 创建

  1. 下载Vue脚手架npm install -g @vue/cli

  2. 查看是否成功，成功出现版本号vue --version

  3. 创建自己的项目vue create my-project

  4. 选第三个然后一路默认

  5. cd my-project

  6. npm run serve

  7. 浏览器中输入 http://localhost:8080/ 就能看到Vue界面了

使用 vite 创建

  1. vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发

  2. 它做到了_本地快速开发启动_, 在生产环境下基于 Rollup 打包

  3. 快速的冷启动，不需要等待打包操作

  4. 即时的热模块更新，替换性能和模块数量的解耦让更新飞起

  5. 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变

  6. 使用

  • npm i create-vite-app

  • npm init vite-app

  • cd

  • npm install

  • npm run dev

基本介绍

=======================================================================

App.vue中个部分信息介绍

avatar
文章
阅读
粉丝