大前端学习-Vue3.0介绍

文章内容输出来源 拉勾教育大前端高薪训练营

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 内部使用的公共APi
• size-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