Vue.js 3.0介绍 上

是洋柿子啊
1,884 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

Vue.js 3.0

接下来我们来学习 Vue3.0,我们会通过以下几个小点，来对大家进行介绍

  • 源码组织方式的变化
  • Composition API
  • 性能提升
  • Vite

源码组织方式的变化

  • Vue3.0 的源码全部使用TypeScript进行了重写
    • 虽然代码经历了重写，但是90%以上的api都兼容2.x版本
  • 使用 Monorepo 管理项目结构，把独立的功能都提取到不同的包中
    • 使每个功能模块的划分更加的明确
    • 模块之间的依赖关系也更加明确
    • 每个模块都可以单独测试、发布、使用

packages 的目录结构

接下来，让我们看一下源码中关于 packages 的目录结构 image.png packages 下面的包都是独立的包，可以独立发行、独立使用

  • compiler-core
    • 平台无关的编译器
  • compiler-dom
    • 浏览器平台下的编译器，依赖于 compiler-core
  • compiler-sfc
    • sfc（single file component）（单文件组件）用来编译单文件组件，依赖于compiler-core、compiler-dom
  • compiler-ssr
    • 服务端渲染的编译器 依赖于 compiler-dom
  • reactivity-transform
    • 反应性变换目前是一个实验特征。默认情况下禁用它，需要显式选择。在最终确定之前也可能会改变。要保持最新，请注意其关于GitHub的提案和讨论。
  • reactivity
    • 数据响应式系统
  • runtime-core
    • 和平台无关的运行时
  • runtime-dom
    • 针对浏览器的运行时，处理原始dom api事件等
  • runtime-test
    • 专门为测试使用的轻量级运行时，由于这个渲染出来的dom树是一个js对象，所以他可以运行在任意的js环境中，你可以用他来测试渲染是否正确、序列化dom树、记录某次更新的dom操作
  • server-renderer
    • 用于服务端渲染
  • sfc-playground
    • Vue提供官方脚手架工具，以便尽可能快地开始使用SFCS
  • shared
    • Vue内部使用的公共api
  • size-check
    • 是一个私有包，并不会发布到 npm，他的作用是 tree-shaking 之后检查包的大小
  • template-explorer
    • 在浏览器中运行的实时编译组件，会输出render函数
  • vue-compat
    • 迁移构建默认在 Vue 2 模式下运行 - 大多数公共 API 的行为与 Vue 2 完全相同，只有少数例外。使用 Vue 3 中已更改或已弃用的功能将发出运行时警告。还可以基于每个组件启用/禁用功能的兼容性。
  • vue
    • 构建完整版的Vue，依赖于compiler + runtime

Composition API

学习

学习从Compostion 最好的方式就是查看如下的两个文档

设计冻鸡🐤

首先我们需要了解 Vue2.x开发使用的是 Options API

  • Options API
    • 包含一个描述组件选项（data、methods、props等）的对象
    • Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

这么说有点模棱两可，我们来看一个简单的案例，根据两个不同版本的代码，我们就可以理解这两者之间的区别了

  • 功能：展示当前鼠标位置的组件：

    • Vue2.x
    export default {
    data () {
        rteturn {
            postion: {
                x: 0,
                y: 0
              }
        }
    },

    created() {
        window.addEventListener('mousemove', update)
    },

    destroyed() {
        window.removeEventListener('mousemove', update)
    },
    methods: {
        handle(e) {
           position.x = e.pageX
           position.y = e.pageY
        }
    }
}
  • 这时候，如果我们需要添加一个功能，比如搜索啊、定位之类的，我们就需要在data、methods中定义我们需要的参数和方法，如果代码量比较多的话，就需要不断的来回拖动；
  • 另外还比较难提取出可重用的代码逻辑，虽然有 mixins，但是也会有数据来源不清晰，命名冲突等种种情况
  • Vue3.0
import { createApp, reactive, onMounted, onUnmounted, toRefs } from 'vue'

function useMousePosition () {
  // 第一个参数 props
  // 第二个参数 context，attrs、emit、slots
  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 toRefs(position)
}

export default {
  setup () {
    // const position = useMousePosition()
    const { x, y } = useMousePosition()
    return {
      x,
      y
    }
  }
}

这时候，如果我们需要新增搜索等，只需要我们新增一个搜索函数，到时候什么页面需要使用直接导入即可，简简单单有没有！

Composition API的出现是为了解决，Vue在开发大型项目时，遇到超大组件使用 options api 代码不好拆分和重用的问题

小结

本章就暂时介绍到这里，剩下的

  • 性能提升
  • Vite 就留到下一章节进行介绍吧！
avatar
文章
阅读
粉丝