新的 Vue 项目使用了 Tailwind + SCSS，突然发现修改 app.scss 文件的时候，热更新需要 14s+ 才能加载完成。和之前项目唯一不同的是scss的 @import 换成了 @use，这地方应该没问题，sass 团队不可能会犯这么低级的错误。

突然想起，前两天把 128k 的地区数据 regions.js 放 src 目录下了，很有可能是这个引起的。试着把该文件移出 src 目录，还真是。解决：把该文件改为 json 格式，放到 assets 目录。

默认的 tailwind 配置会扫描源码目录下的 vue,js,ts,jsx,tsx 文件，js 文件过大太复杂的时候就会引起问题了。我项目只有 vue 文件需要taiwnid 扫描，把其他后缀去掉，热加载速度明显快很多。配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    // "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

需要做如下两步配置。

1、让 vite 能识别 @ 路径别名

vite.config.js 增加：

1
2
3
4
5
6
7
8
9
10
11
12
13

import { resolve } from 'path';

export default defineConfig {
    // ...
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // vite 编译的路径别名
        },
        // extensions: ['.js', '.json', '.ts'], // 使用路径别名时省略后缀名编译时补全，默认值为 ['.js', '.json', '.ts']
    }
    // ...
}

2、让 IDE 能识别 @ 路径别名

用 @ 路径别名导入文件后，IDE （如 jetbrains 家的）要能识别导入路径，实现代码提示识别，点击导入变量或导入路径能跳转到文件。

在根目录下的 jsconfig.json 加入以下内容：

1
2
3
4
5
6
7
8

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Vue3 使用选项式 API 较容易，按文档上手就行，这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

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

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn', // 设置当前语言
  legacy: false, // 要支持组合式API，此项必须设置为false;
  // globalInjection: true, // 全局vue视图中注册$t方法，vue-i18n v9.2 之后默认是 true
  messages: {
    cn: {
      message: {
        hello: '你好',
      },
    },
    en: {
      message: {
        hello: 'hello',
      },
    },
  },
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

1
2
3
4
5
6
7
8
9
10

<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n，关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
  <div>在视图中使用语言： {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数，需要频繁使用，这样太麻烦了。
我们可以定义 window.$t 全局函数，这样在 setup 中也能直接用 $t()取得语言信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn',
  messages: {
    cn: {
      hello: '你好',
    },
    en: {
        hello: 'hello',
    },
  },
});

window.$t = function() {
  return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档： https://vue-i18n.intlify.dev/guide/

在 Vite 中用 manualChunks 分割打包时，找文件依赖很麻烦，用 rollup-plugin-visualizer 可以帮我们找出依赖关系、分析依赖包的大小。

安装插件 rollup-plugin-visualizer

pnpm i -D rollup-plugin-visualizer

使用插件

在 vite.config.js 中添加：

1
2
3
4
5

import { visualizer } from 'rollup-plugin-visualizer';

plugins:[
     visualizer({ open: true }) // 使用依赖分析，open: true 开启编译完成后自动弹出分析结果 html 页面
]

分析结果

执行 pnpm build，编译完成后，会在浏览器中自动打开下面的页面：

问题复现

开发 SPA 应用用到 ElementPlus，官方推荐用 自动导入 方式来引用。

如果你用笔记本开发，那么预览时 js 的加载速度会极慢，node 占 CPU 超过100%，非常影响开发体验，恨不得换到 MPA 模式开发。

原因

因为自动自动导入方式预览时，要加载一百多个js文件。如果你用的是强劲的台式机，用这个方式没发现有明细的卡。笔记本 CPU 顶不住。

解决办法

用 完整引入 或 按需导入 就没这个问题。

建议使用 完整引入 方式，ElementPlus 相关 js 就只引入了一个 /node_modules/.vite/deps/element-plus.js，而不是自动导入的上百的js文件。

编译后 element-plus 后的 js gz 后需要多传输 100k 左右，如果你受不了，可以另外加一个自动加载的 vite 配置，在增加一个创建不用全局引入 ElementPlus 的入口文件给 vite 引用。

如：build 时使用 vite.build.js 配置，在 vite.build.js 中引用使用 自动导入 的js入口文件。再把 package.json 的 scripts.build 改为 vite build --config vite.build.js，这样就可以实现 dev 时使用完整引入ElementPlus，build 时使用自动导入减少编译文件的大小。

localStorage 本地存储各家浏览器分别限制在 2.5M ~ 10M 之间，本地浏览器需要存储较大数据的时候就不能用了， IndexedDB 就能解决这个问题。

IndexedDB 是存储结构类似 MangoDB 的对象存储数据库，不是关系型数据库。 IndexedDB API 稍微有点麻烦，用 Dexie.js 可简化操作。

什么是响应式？

Vue3 的响应式是：当更改响应式对象的值改变时，视图会随即自动更新。

ref()

ref() 返回一个响应式对象，可以用 value 属性来访问或更改对象的值。
ref 对象在模板中会自动解包，用变量名不需要加 .value 就能访问。

1
2
3
4
5
6
7
8
9
10
11

<script setup>
import { ref } from 'vue';

const say = ref('hi'); // 定义值为 hi 的响应式变量 say
say.value = 'hello'; // 把 say 的值改为 hello
</script>

<template>
    <!-- 自动解包，不需要些成 {{ say.value }} -->
    <p>{{ say }}</p>
</template>

reactive()

本文总结 Vue3 组件实例在模板中暴露的常用公共属性和方法，以及对应的 组合式 API 函数。

$data/$props/$options 属性在 组合式 API 下几乎用不到。
$el 不建议用。
$slots 表示父组件所传入插槽的一个对象，很少用，有兴趣可查看官方文档。

$parent

模板中用 $parent 获取父组件实例，可访问父组件用 defineExpose() 显式暴露的绑定。

组合式 API 先在 setup 中用 getCurrentInstance() 获取到当前组件实例，再用 parent 属性访问父组件。getCurrentInstance().parent 除了能访问父组 defineExpose() 暴漏的绑定外，能访问父组件更多的属性和方法，多用于组件的开发，在应用开发中一般不建议用。

1
2
3
4
5

import { getCurrentInstance } from 'vue';

const parent = getCurrentInstance().parent; // 获取父组件的实例
parent.exposed // 访问父组件 defineExpose() 暴露的绑定
parent.refs // 父组件中的模板引用，在模板中用 $parent.$refs

$root

call、apply、bind 是 JavaScript 函数的原型方法，用于改变函数的 this 指向来执行函数。一般这种鬼操作能不用则不用，没得选的时候才有必要用。

• apply() 调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象的形式提供的参数
• call() 使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
• bind() 创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const bar = {
    name: 'johnny'
};
function foo (age, hobby) {
    console.log(this.name, age, hobby);
}

// apply 和 call 作用相同，传参方式不同
foo.apply(bar, [28, 'sleep']); // johnny 28 sleep
foo.call(bar, 28, 'sleep'); // johnny 28 sleep

// 先绑定对象返回一个函数
const bindBar = foo.bind(bar);
bindBar(28, 'sleep'); // johnny 28 sleep

参考：深入理解JavaScript——call、apply、bind三大将

见过箭头函数后，知道箭头函数是 function 定义函数的简写，然后还有一点是箭头函数中的 this 是上级代码的 this。
其实除了这两点外，箭头函数和 function 函数还有很多区别。

1、基本语法

1
2
3
4
5
6
7
8
9
10
11
12

// 没有参数时
() => {
    // code ...
}
// 有参数时
(param1, param2, ..., paramN) => {
    // code ...
}
// 只有1个参数时，圆括号可以省略
param => {
    // code ...
}

2、this 指向

• 在顶级代码中， this 指向 window 对象；
• 在 function 定义的函数中， this 指向该函数的对象；
• 在箭头函数中，箭头函数不会创建自己的 this，始终指向箭头函数所在作用域下的 this。

用原型方法 apply()、call()、bind() 不能改变箭头函数中 this 的指向。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const bar = {
    name: 'johnny'
};
function foo () {
    console.log(this.name);
}

const fa = () => {
    console.log(this.name);
};

// bar 作为 foo() 实例的 this
foo.call(bar); // johnny
fa.call(bar); // TypeError: Cannot read properties of undefined (reading 'name')

3、箭头函数不能做构造函数