【Vue3.xx】基础讲解

Vue3基础

1. Vue3的介绍

Vue设计的初衷就包括可以被渐进式地采用 ，所以Vue3支持2中的大部分特性 (迁移指南)。

Vue3新增特性:

• 性能

  • 虚拟DOM的重写

  • 打包大小减少( tree shaking)

  • 初次渲染快

  • 内存使用减少(compositionAPI)

• 新增语法(compositionAPI)

  • ref和reactive

  • computed和watch

  • 新的生命周期函数

  • 自定义函数-Hooks函数(像React Hooks)

    …

• 其它新赠特性

  • Teleport 瞬移组件
  • Suspense 异步加载组件
  • 全局API的修改和优化
  • Custom renderer

• 任何的修改都已经移到全局的实例上去

  全局配置

  • Vue.config 改成 app.config

  全局注册类API

  • Vue.component 改为 app.component

  • Vue.directive 改为 app.directive

  行为扩展类API

  • Vue.mixin 改为 app.mixin

  • Vue.use 改为 app.use

• 更好的Typescript支持

Vue2遇到的难题

Vue2的组件 API 设计所面对的核心问题之一就是如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。基于 Vue 2 目前的 API 我们有一些常见的逻辑复用模式，但都或多或少存在一些问题。这些模式包括：

• Mixins
  • 命名冲突
  • 不清楚暴露出来变量的作用
  • 重用到其他component经常会遇到问题
• 高阶组件 (HOC)
• Renderless Components (基于 scoped slots / 作用域插槽封装逻辑的组件）

总体来说，以上这些模式存在以下问题：

• 模版中的数据来源不清晰

  ​ 举例来说，当一个组件中使用了多个 mixin 的时候，光看模版会很难分清一个属性到底是来自哪一个 mixin。HOC 也有类似的问题。

• 命名空间冲突

  ​ 由不同开发者开发的 mixin 无法保证不会正好用到一样的属性或是方法名。HOC 在注入的 props 中也存在类似问题。

• 性能

  ​ HOC 和 Renderless Components 都需要额外的组件实例嵌套来封装逻辑，导致无谓的性能开销。

Vue3解决的问题

​ Function-based API 受 React Hooks 的启发，提供了一个全新的逻辑复用方案，且不存在上述问题。使用基于函数的 API，我们可以将相关联的代码抽取到一个 “composition function”（组合函数）中 —— 该函数封装了相关联的逻辑，并将需要暴露给组件的状态以响应式的数据源的方式返回出来。这里是一个用组合函数来封装鼠标位置侦听逻辑的例子：

function useMouse() {
   
  const x = ref(0)
  const y = ref(0)
  const update = e => {
   
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
   
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
   
    window.removeEventListener('mousemove', update)
  })
  return {
    x, y }
}

// 在组件中使用该函数
const Component = {
   
  setup() {
   
    const {
    x, y } = useMouse()
    // 与其它函数配合使用
    const {
    z } = useOtherLogic()
    return {
    x, y, z }
  },
  template: `<div>{
    { x }} {
    { y }} {
    { z }}</div>`
}

从以上例子中可以看到：

• 暴露给模版的属性来源清晰（从函数返回）
• 返回值可以被任意重命名，所以不存在命名空间冲突
• 没有创建额外的组件实例所带来的性能损耗

类型问题:

​ Vue3原本期望Class类解决类型推倒问题,最后依然存在类型问题.最后采用了天然对类型很友好的基于函数的API,因为基于函数API在使用TS或是原生JS时写出来的代码几乎一摸一样

打包尺寸:

​ 基于函数的 API 每一个函数都可以被 ES export 被单独引入,主要这样对tree-shaking很友好

没有使用的API打包的时候会被移除,基于函数API有更好的压缩效率,但是Class的属性和方法名不行

2. 体验Vue3

安装

三种方式：

1. 在页面上以 CDN 包的形式导入。
2. 使用 npm 安装它。
3. 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

1. cdn

<script src="https://unpkg.com/vue@next"></script>

2. npm

// 最新稳定版
npm install vue@next

3. 命令行工具 (CLI)

// 最新稳定版
yarn global add @vue/cli
// 然后在Vue项目中运行(更新相关插件)
vue upgrade --next
// 创建Vue3项目跟2一样