将OneNote笔记与Word文档链接的两种方法(onenote怎样打开word文档)
866
2022-05-30
文章内容输出来源:大前端高薪训练营
一、Vue.js 源码组织方式
1. 源码采用TypeScript重写
提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言,在编码的过程中检查类型的问题。
2. 使用Monorepo管理项目结构
使用一个项目管理多个包,把不同功能的代码放到不同的package中管理,每个功能模块都可以单独发布,单独测试,单独使用。
3. 不同构建版本
Vue3中不再构建UMD模块化的方式,因为UMD会让代码有更多的冗余,它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。
cjs(两个版本都是完整版,包含编译器)
vue.cjs.js
vue.cjs.prod.js(开发版,代码进行了压缩)
global(这四个版本都可以在浏览器中直接通过scripts标签导入,导入之后会增加一个全局的Vue对象)
vue.global.js(完整版,包含编译器和运行时)
vue.global.prod.js(完整版,包含编译器和运行时,这是开发版本,代码进行了压缩)
vue.runtime.global.js
vue.runtime.global.prod.js
browser(四个版本都包含esm,浏览器的原生模块化方式,可以直接通过的方式来导入模块)
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
bundler(这两个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会让Vue体积更小)
vue.esm-bundler.js
bue.runtime.esm-bundler.js
二、Composition API
RFC (Request For Coments)
https://github.com/vuejs/rfcs
Composition API RFC
https://composition-api.vuejs.org
1. 设计动机
Options API
包含一个描述组件选项(data、methods、props等)的对象
Options API 开发复杂组件,同一个功能逻辑的代码被拆分到不同选项
Composition API
Vue.js 3.0 新增的一组API
一组基于函数的API
可以更灵活的组织组件的逻辑
三、性能提升
1. 响应式系统升级
Vue3使用Proxy对象重写了响应式系统。
Vue.js 2.x中响应式系统的核心 defineProperty,初始化的时候递归遍历所有的属性,转化为getter、setter
Vue.js 3.0中使用Proxy对象重写响应式系统
可监听动态新增的属性
可以监听删除的属性
可以监听数组的索引和length属性
2. 编译优化
重写了DOM提高渲染的性能。
Vue.js 2.x中通过标记静态根节点,优化diff的过程
Vue.js 3.0 中标记和提升所有的静态根节点,diff的时候只需要对比动态节点内容
Fragments(升级vetur插件)
静态提升
Patch flag
缓存事件处理函数
3.源码体积的优化
通过优化源码的体积和更好的TreeShaking的支持,减少大打包的体积
Vue.js 3.0中移除了一些不常用的API
例如:inline-template、filter等
Tree-shaking
例如:Vue3中的没用到的模块不会被打包,但是核心模块会打包。Keep-Alive、transition等都是按需引入的。
四、Vite
Vue的打包工具。Vite是法语中的"快"的意思
1. ES Module
现代浏览器都支持ES Module(IE不支持)
通过下面的方式加载模块
支持模块的script默认延迟加载
有了type="module"的模块是延迟加载的,类似于script标签设置defer
在文档解析完成后,也就是DOM树生成之后,触发DOMContentLoaded事件前执行
2. Vite as Vue-CLI
Vite 在开发模式下不需要打包可以直接运行
Vue-CLI开发模式下必须对项目打包才可以运行
Vite在生产环境下使用Rollup打包
基于ES Module的方式打包
Vue-CLI使用Webpack打包
3. Vite特点
快速冷启动
按需编译
模块热更新
4. Vite创建项目
Vite创建项目
npm init vite-app
1
2
3
4
基于模板创建项目
npm init vite-app --template react npm init vite-app --template preact
1
2
JavaScript Vue web前端
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。