一、Vue.js 源码组织方式

1. 源码采用TypeScript重写

提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言,在编码的过程中检查类型的问题。

2. 使用Monorepo管理项目结构

使用一个项目管理多个包,把不同功能的代码放到不同的package中管理,每个功能模块都可以单独发布,单独测试,单独使用。

在这里插入图片描述
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 内部使用的公共APi
  • size-check 是一个私有的包,不会发布到`npm ,在 ch 检查包的大小
  • templae-explorer 在浏览器运行的实时编译组件,会输出render 函数
  • vue 构建完整版Vue

二、 不同构建版本

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,浏览器的原生模块化方式,可以直接通过<script type="module" />的方式来导入模块)
  • 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 Comments)
    • 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
    • 可以更灵活的组织组件的逻辑

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 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可以更合理的组织代码结构,还可把一些功能提取出来,方便其他组件复用

四、性能提升

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" src="..."></script>
  • 支持模块的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 <project-name>
cd <project-name>
npm install
npm run dev

基于模板创建项目

npm init vite-app --template react
npm init vite-app --template preact
Logo

前往低代码交流专区

更多推荐