大前端学习-Vue3.0介绍
文章内容输出来源 拉勾教育大前端高薪训练营1、Vue.js 3.0源码组织方式的变化Compositons API性能提示Vite源码组织方式源码采用 TypeScript 重写使用 Monorepo 管理项目结构packages 目录结构pageages 目录下都是独立发行的包,可以独立使用,以compiler 开头的包,它们都是和编译相关的代码compiler-core和平台无关的编译器com
文章内容输出来源 拉勾教育大前端高薪训练营
1、Vue.js 3.0
- 源码组织方式的变化
- Compositons API
- 性能提示
- Vite
源码组织方式
- 源码采用
TypeScript
重写 - 使用
Monorepo
管理项目结构
packages 目录结构
pageages
目录下都是独立发行的包,可以独立使用,以compiler
开头的包,它们都是和编译相关的代码
compiler-core
和平台无关的编译器compiler-dom
是浏览器平台的编译器, 依赖与compiler-core
compoler-sfc sfc
是 单文件组件的意思,作用是编译单文件组件,依赖与compiler-core
和compiler-dom
compiler-ssr
是服务端渲染的编译器,依赖与compiler-dom
reactivity
数据响应式系统,可以独立使用runtime-core
和平台无关的运行时runtime-dom
针对浏览器的运行时,处理原生dom api
事件等runtime-test
是一个专门为测试编译的轻量级运行时,由于这个运行时渲染出来的DOM
树其实是一个JS 对象,所以这个js 对象可以运行在所有的环境里,可以用来测试是否渲染正确,可以用来序列化dom 以及记录某次dom 中的操作server-renderer
用于服务端渲染shared
内部使用的公共APisize-check
是一个私有的包,不会发布到`npm ,在 ch 检查包的大小templae-explorer
在浏览器运行的实时编译组件,会输出render
函数vue
构建完整版Vue
2、Vue3.0 不同构建版本
Vue3.0
和Vue 2.0
构建版本时,Vue 3
不再构建UMD
模式、因为UMD
模块化模式,会让代码冗余- 在
packages dist
目录文件中,存放了Vue 3.0
的所有构建版本
cjs
- vue.cjs.js
- vue.cjs.prod.js
global
- vue.global.js
- vue.global.prod.js
- vue.runtime.global.js
- vue.runtime.global.prod.js
browser
bunler
3、Composition API 设计动机
-
RFC (Request For Comments) 通过 RFC 的确认
-
https://github.com/vuejs/rfcs
-
Composition API RFC
-
https://composition-api.vuejs.org
设计动机
- Options API包含一个描述组件选项 (data、methods、props 等)的对象
- Options API 开发复杂组件,同一个功能逻辑的代码被拆分到不同选项
Options API Demo
export default {
data () {
return {
position: {
x: 0,
y: 0
}
}
},
created () {
window.addEventListener('mousemove', this.handle)
},
destroyed () {
window.removeEventListener('mousemove', this.handle)
},
methods: {
handle (e) {
this.position.x = e.pageX
this.positions.y = e.pageY
}
}
}
Composition API
- Vue.js 3.0 新增的一组API
- 一组基于函数的API
- 可以更灵活的组织组件的逻辑
Composition Demo
import { reactive, onMounted, onUnmounted } from 'vue'
function useMousePosition () {
const position = reactive({
x: 0,
y: 0
})
const update = (e) => {
position.x = e.pageX
position.y = e.pageY
},
onMounted (() => {
window.addEventListener('mousemove', update)
})
onUnmounted (() => {
window.removeEventListener('mousemove', update)
})
return position
}
export default {
setup () {
const postion = useMousePosition
return {
postion
}
}
}
// useMousePosition提取到公共模块中,然后直接导入即可
Composition API
提供了一个基于函数API,让我们可以更灵活组织组件的逻辑,使用Composition API
可以更合理的组织代码结构,还可把一些功能提取出来,方便其他组件复用
4、性能提升
响应式系统升级
- Vue.js 2.x 中响应式吸用的核心defineProperty
- Vue.js 3.0 中使用Proxy 对象重写响应式系统
- 可以监听懂爱新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和length 属性
编译优化
- Vue.js 2.x中通过标记静态根节点,优化diff的过程
- Vue.js 3.0中标记和提升所有的静态根节点,diff的时候只需要对比动态节点内容
- Fragments (升级vetur插件)
- 静态提升
- Patch flag
- 缓存事件处理函数
<template>
<div id="app">
<div> static root
<div>static node</div>
</div>
<div>static node</div>
<div>static node</div>
<div>static node</div>
</div>
</template>
hoistStatic
源码体积的优化
Vue.js 中移除了一些不常用的API
- 例如:
inline-template
、filter
等,可以最终让代码的体积变小 Tree-shaking
依赖ES Module
,也就是import export
通过编译阶段的静态的分析,找到没有引用的代码,直接打包的时候过滤调,让体积更小
5、Vite
尤大大自己开发了一个构建工具,意思是快,Vite比过去基于webpack-cli更快
- 现代浏览器都支持
ES Module (IE 不支持)
- 通过下面的方式加载模块
- script type=" module" src="…" >
- 支持模块的
script
默认延迟加载 - 类似于
script
标签设置defer - 在文档解析完成后,触发
DOMContentLoaded
事件前执行
// util.js
export const forEach = (array, fn) => {
let i
for (i = 0; i< array.length;i++) {
fn(array[i])
}
}
export const some = (array, fn) => {
let result = true
for (const value of array) {
result = result || fn(value)
if (result) {
break
}
}
return result
}
import { forEach } from './utils'
// index.html
<script type="module" src="./modules/index.js">
window.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded')
})
6、Vite 介绍
Vite
快就是使用浏览器支持的ES Modules
的方式,避免开发环境打包,从而提升开发速度
Vite as Vue-Cli
- Vite 在开发模式下不需要打包可以直接运行
- Vue-Cli 开发模式下必须对项目打包才可以运行
Vite的特点
- 快速冷启动
- 按需编译
- 模块热更新
- Vite 在生产环境下使用Rollup 打包
- 基于ES Module 的方式打包
- Vue-Cli 使用 Webpack 打包
Vite 创建项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
基于模版创建项目
npm init vite-app --template react
npm init vite-app --template preact
更多推荐
所有评论(0)