发表于

响应式数据与副作用函数

副作用函数

副作用函数指的是会产生副作用的函数，如下面代码所示：

1
2
3
function effect() {
  document.body.innerText = 'hello vue3'
}

当effect函数执行的时候，它会设置 body 的文本内容，但是除了effect函数之外的任何函数都可以读取或者设置 body 的文本内容。也就是说，effect函数的执行会直接或者间接影响其他函数的执行，这个时候我们就说effect函数产生了副作用。

副作用很容易产生，例如一个函数修改了全局变量。这其实也是一个副作用，如下面代码所示：

1
2
3
4
5
let val = 1

function effect() {
  val = 2
}

响应式数据
理解了什么是副作用函数，再来看看什么是响应式数据。 假设在一个副作用函数中读取了某个对象的属性：

1
2
3
4
const obj = { text: 'hello guozhaoxi' }
function effect() {
  document.body.innerText = obj.text
}

副作用函数effect会设置body元素的innerText属性,它的值为obj.text，当obj.text发生变化的时候，我们希望副作用函数effect会重新执行：

1
obj.text = 'hello world' // 修改obj.text的值，同时希望effect函数能够重新执行

上面这句代码修改了字段 obj.text 的值，我们希望当值发生变化以后，副作用函数自动重新执行，如果能实现这个目标，那么对象obj就是响应式数据。

响应式数据的基本实现

阅读全文 »

发表于

Message 组件常用于主动操作后的反馈提示。下面是效果图
Message组件效果动图

看完了效果图以后，我们再来看看看如何在页面中使用我们的Message组件。

1
2
3
4
5
6
7
8
9
10
<template>
  <TmButton @click="open">打开Message组件</TmButton>
</template>
<script lang="ts" setup>
  import TmButton from '@/components/Button/Button.vue'
  import { CreateMessage } from '@/components/Message/method.ts'
  const open = () => {
    CreateMessage({ message: 'hello world', duration: 0, showClose: true })
  }
</script>

需求分析

Message 组件属性和方法
看完了上面的效果图以及调用Message组件的方式以后，我们来分析一下它可能具备哪些属性和方法。我写了以下几个属性、方法：

  • message 提示信息
  • duration 延时关闭提示框的时间，如果为 0 则需要手动关闭
  • showClose 是否显示关闭按钮
  • transitionName 过渡动画的名称
  • id 每一个 Message 组件实例的id
  • zIndex 每一个 Message 组件实例的zIndex
  • onDestory 每一个 Message 组件实例的销毁函数 从body中移除自己的 DOM
  • type 类型 不同的类型有不同的css风格

如何挂载和销毁
组件写好了，我们如何挂载到页面的<body></body>的内容中去，同时还要思考在用户点击了关闭按钮或者自动关闭以后如何从<body></body>中移除自身。在 vue 中提供了createApp和render两个函数，createApp有些重量了，因为它返回的是一个应用；而我们这里只是需要将我们写好的组件挂载到页面中去。所以选择使用render这个函数。 销毁自身的话可以调用组件内部的方法，实际上就是将控制组件显示、隐藏的变量visible设置为 false。然后再调用render将其相关的dom从
body中去除。

如何获取组件实例信息
通过效果图我们可以看出，Message组件之间是有一定距离的，这样显示的时候不会重叠在一起；那么我们就要思考如何在创建Message组件的时候让它移动一定的偏移量。那么我们就要拿到Message组件的实例信息。所以我们给每一个Message组件赋一个唯一的id，通过id找到对应的组件实例。在编写组件的时候，通过defineExpose向外导出需要用到的属性。比如组件底部的偏移量bottomOffset和控制组件显示、隐藏的visible。

如何添加动画效果
在Vue中，添加动画使用<Transition></Transition>标签。监听@afterLeave和@enter两个事件。在动画结束以后注销实例，在动画进入以后更新一下组件的高度，从而实现对应的css样式，避免Message组件之间重叠。

代码实现

阅读全文 »

发表于

第一章：权衡的艺术

在这一章中，开头的一句话，描述了框架设计的精髓，这句话也是尤雨溪在多个开发者大会中经常提到的，那就是：框架的设计，本身就是一种权衡的艺术。

在本章中，我们首先讨论了命令式和声明式这两种范式的差异，其中命令式更加关注过程，而声明式更加关注结果。命令式理论上可以做到极致优化，但是用户要承受巨大的心智负担；而声明式能够有效减轻用户的心智负担，但是性能上有一定的牺牲，框架设计者要想办法尽量使性能损耗最小化。

接着讨论了虚拟DOM的性能，并给出了一个公式：声明式的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。虚拟DOM的意义就在于使找出差异的性能消耗最小化。对比虚拟DOM、原生JavaScript、innerHTML三者操作页面的性能。发现与页面大小、变更部分的大小都有关系，除此之外，还与是创建页面还是更新页面也有关系。最后发现虚拟DOM是个不错的选择。

最后，介绍了运行时、编译时的相关知识，了解纯运行时、纯编译时以及两者都支持的框架各有什么特点，并总结出Vue.js3是一个编译时+运行时的框架，它在保持灵活性的基础上，还能通过编译手段分析用户提供的内容，从而进一步提升性能。

在这一章中，书中分别从三个方面来去分析了所谓权衡的艺术，到底是什么意思。

命令式和声明式

所谓命令式指的就是：关注过程的范式。而声明式指的就是：关注结果的范式。

张三的妈妈，让张三去买酱油。
那么对于张三而言，他就需要：拿钱、出门、下楼、进超市、拿酱油、付钱、回家。
而对于张三的妈妈来说，她完全不需要关心张三做了什么，只需要对张三说一声就可以了。

那么在这个例子中，张三就是一个典型的命令式，他需要完成整件事情的所有过程。

而张三的妈妈，就是典型的声明式，她不关心过程只关心结果。

那么这里大家来想一下，vue 是声明式的？还是命令式的？

对于 vue 而言，它的内部实现一定是 命令式 的，而我们在使用 vue 的时候，则是通过 声明式 来使用的。

也就是说： vue 封装了命令式的过程，对外暴露出了声明式的结果

性能与可维护性的权衡

阅读全文 »

发表于

需求分析

Tooltip组件要实现的需求就是当我们点击或者鼠标移入的时候显示对应的文字提示。同时文字的内容、位置以及显示、隐藏的延迟时间还有是否使用过渡效果等。这里要注意的是我们使用popperjs来实现文字位置的展示。它的原理也很简单：通过计算和定位，将弹出元素放在与目标元素相关的位置上。另外popperjs还会监听窗口的变化，以便在窗口大小或滚动位置发生变化时，重新计算和定位弹出元素。那么我们先看一下Tooltip组件有哪些配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// types.ts
import { Placement, Options } from '@popperjs/core'
export interface TooltipProps {
  content?: string
  trigger?: 'hover' | 'click'
  placement?: Placement
  popperOptions?: Partial<Options>
  transition?: string
  openDelay?: number
  closeDelay?: number
  manual?: boolean
}

export interface TooltipEmits {
  (e: 'visible-change', value: boolean): void
  (e: 'click-outside', value: boolean): void
}

export interface TooltipInstance {
  show: () => void
  hide: () => void
}

TooltipProps定义了我们这个Tooltip组件可以接受哪些属性； TooltipEmits是我们定义的Tooltip组件的事件类型接口，有两个事件，一个是点击了元素以外区域，另一个是当显示、隐藏发生变化的时候；TooltipInstance是我们向外暴露一个实例，它的类型接口有两个方法分别是show和hide用来控制显示和隐藏。

阅读全文 »

发表于

需求分析

我们在写完组件以后，要对组件进行测试，前端测试框架较为出名的有mocha、jest和今天我们要用到的vitest。以Button组件为例来看看怎么使用vitest编写测试用例。

安装

1
2
3
npm instlal vitest -D

npm install @vue/test-utils -D

编写测试用例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from './Button.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import IconVue from '../Icon/Icon.vue'

describe('Button.vue', () => {
    test('basic button', () => {
        const wrapper = mount(Button, {
            props: {
                type: 'primary'
            },
            slots: {
                default: 'button'
            }
        })
        console.log(wrapper.html())
        expect(wrapper.classes()).toContain('tm-button--primary')
    })
})

遇到的问题

当我们使用vitest测试上面这个用例的时候会遇到一个报错 document is not defined。这是因为在非浏览器环境下是没有document这个对象的，解决这个问题的一种常见方法就是使用jsdom库来模拟浏览器环境，为mount方法提供一个虚拟的document对象。那么我们来安装一下这个库，并且对vitest进行一些简单的配置。

1
2
3
4
5
6
7
npm install jsdom -D

npm install unplugin-vue-macros -D

npm install @vitejs/plugin-vue-jsx -D

npm install @vitejs/plugin-vue -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/// <reference types="vitest" />

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueMacros from 'unplugin-vue-macros'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueMacros.vite({
      plugins: {
        vue: vue(),
        vueJsx: vueJsx(),
      },
    })
  ],
  test: {
    globals: true,
    environment: 'jsdom'
  }
})

发表于

需求分析

Icon组件的核心其实就是一个i标签，引入了一些字体图标，再添加一些样式，当然也可以自定义css样式。按照惯例，我们先来写一下Icon组件所需要的属性以及他们的类型有哪些。除此之外呢，我们还要找一些合适的字体图标，那么@fortawesome/fontawesome-svg-core、@fortawesome/free-solid-svg-icons和@fortawesome/vue-fontawesome就很适合我们这个Icon组件。

代码实现

先来看看Icon组件可以接受哪些属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
export interface IconProps {
  border?: boolean
  fixedWidth?: boolean
  flip?: 'horizontal' | 'vertical' | 'both'
  icon: object | Array<string> | string | IconDefinition
  mask?: object | Array<string> | string
  listItem?: boolean
  pull?: 'right' | 'left'
  pulse?: boolean
  rotation?: 90 | 180 | 270 | '90' | '180' | '270'
  swapOpacity?: boolean
  size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x'
  spin?: boolean
  transform?: object | string
  symbol?: boolean | string
  title?: string
  inverse?: boolean
  bounce?: boolean
  shake?: boolean
  beat?: boolean
  fade?: boolean
  beatFade?: boolean
  spinPulse?: boolean
  spinReverse?: boolean
  type?: 'primary'| 'success'| 'warning'| 'danger'| 'info'
  color?: string
}

组件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <i class="tm-icon" :class="{[`tm-icon--${type}`]: type}" :style="customStyles" v-bind="$attrs">
        <font-awesome-icon v-bind="filteredProps"></font-awesome-icon>
    </i>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { omit } from 'lodash-es'
import type { IconProps } from './types'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
defineOptions({
    name: 'TmIcon',
    inheritAttrs: false
})
const props = defineProps<IconProps>()
const filteredProps = computed(() => omit(props, ['type', 'color']))
const customStyles = computed(() => {
    return props.color ? { color: props.color } : {}
})
</script>

Icon组件的代码结构也很简单，它的核心就是一个<i>标签,添加了一些属性和自定义的样式。

引入字体图标库

1
2
3
4
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

在其他组件中使用Icon组件

在Button组件中使用

1
2
3
<!-- Button.vue -->
<Icon v-if="loading" :icon="spinner" spin></Icon>
<Icon v-if="icon" :icon="icon"></Icon>
1
2
3
4
5
6
7
8
<!-- 在App.vue中引入Button组件 -->
<script lang="ts" setup>
import TmButton from '@/components/Button/Button.vue'
</script>

<template>
    <TmButton loading size="large"></TmButton>
</template>

发表于

需求分析

折叠面板组件，一般来说由两部分组成，它们分别是Collapse和CollapseItem。现在我们来想一想，它们可能会有哪些属性和方法。

Collapse

属性：

  • model-value / v-model：当前活动面板，在手风琴模式下是 string 类型，在其他模式下是 array，默认值是一个空数组。
  • accordion：是否手风琴模式，是一个 boolean 类型。

事件：

  • change：切换当前活动面板，参数在手风琴模式下是 string,在其他模式下是 array
  • update:modelValue：实现 v-model 要用到

插槽：

  • default：默认插槽，自定义默认内容

CollapseItem

属性：

  • name：唯一标识符，类型是 string 或者 number
  • title：面板的标题，类型是 string
  • disabled：是否禁用，类型是 boolean
    事件：
    无

插槽：

  • title：具名插槽，CollapseItem 的标题
  • default: 默认插槽，CollapseItem 的内容

代码实现

阅读全文 »

发表于

需求分析

Button组件大部分关注样式，没有交互。我们可以分析得到Button组件具体的属性列表：

  • type：不同的样式（primary、danger、warning、info、success）
  • size：不同的尺寸（large、small、default）
  • plain：是否为朴素按钮（样式的不同展现模式）
  • round：是否开启圆角
  • circle：是否圆形按钮
  • disabled：是否禁用
  • loading：是否为加载中状态
  • icon：图标组件

Button组件的本质

Button组件的本质其实就是class类名的组合

1
<button class="tm-button tm-button--primary tm-button--large is-plain is-disabled">按钮</button>

初始化项目

分析完了需求以后，我们就开始着手写代码，先使用脚手架工具初始化一个vite + vue3 + typescript + eslint的项目。

1
2
3
4
5
6
7
npm create vue@latest
#or
pnpm create vue@latest
#or
yarn create vue@latest
#or
bun create vue@latest

确定项目文件结构

  • components
    • Button
      • Button.vue 组件
      • style.css 样式
      • types.ts 一些辅助的typescript类型
      • Button.test.ts 测试文件
阅读全文 »

发表于

实现Npm私有仓库的方式有很多种，例如Gitlib私有仓库、cnpm、sinopia和verdaccio。Gitlib私有仓库与cnpm配置很繁琐，不适合快速开发，sinopia已7年多未维护。那剩下只能选择verdaccio了。

verdaccio的前身是sinopia，因为sinopia的作者突然宣布不维护，一些开发大神就收起该烂摊子，基于sinopia@1.4.0开发了verdaccio并一直维护至今。

利用verdaccio部署一个属于自己的私有npm仓库

安装

因为verdaccio只能运行在Node v12以上的环境，在安装前先检查当前Node版本并将其切换到v12以上。

1
2
3
4
5
6
7
8
9
10
11
# 查看node.js版本
node -v

# 利用nvm切换node.js版本
nvm use 16.14.8

# 全局安装verdaccio
npm i -g verdaccio

# 查看verdaccio版本
verdaccio -v

启动

当我们安装完verdaccio以后，在cmd命令行工具输入 verdaccio 如果看到输出下面这样的信息，说明启动成功了：

1
2
3
4
5
6
info --- config file  - C:\Users\mdguozhaoxi\AppData\Roaming\verdaccio\config.yaml
info --- the "crypt" algorithm is deprecated consider switch to "bcrypt" in the configuration file. Read the documentation for additional details
info --- using htpasswd file: C:\Users\mdguozhaoxi\AppData\Roaming\verdaccio\htpasswd
info --- plugin successfully loaded: verdaccio-htpasswd
info --- plugin successfully loaded: verdaccio-audit
warn --- http address - http://localhost:4873/ - verdaccio/5.29.0
阅读全文 »

发表于

总体来说，非必要的情况下最好避免使用 reactive。官方文档也强烈推荐使用 ref() 作为声明响应式状态的主要API。以下是详细原因：

  1. 局限性问题：reactive本身存在一些局限性，可能会在开发过程中引发一些问题。这些问题需要额外的注意力和处理，否则可能对开发造成麻烦。

  2. 数据类型限制：reactive声明的数据类型仅限于对象，而ref更加灵活，可以容纳任何数据类型。这使得ref更适合一般的响应式状态的声明。

  3. 官方推荐：官方文档强烈建议使用ref()作为声明响应式状态的首选。这是因为ref更简单、更直观、同时避免了reactive可能引发的一些问题。

总的来说，除非有特定的需求使用reactive,否则在大多数情况下更推荐使用ref()。

reactive和ref对比

阅读全文 »