Vite和vue3使用过程踩的坑

关于vue3的watchEffect

在使用watchEffect时，遇到过其中某个响应式对象未被添加为依赖项的情况，在官方文档可以看到这样一句话：

watchEffect会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

注意同步这个词，watchEffect函数会立即执行一次传入的函数，并检查其中用到的响应式数据源。如果传入watchEffect的函数是一个异步函数，其中包含了异步操作，比如promise.then的代码，或者await后面的代码，这些异步操作内的响应式对象可能不会被追踪为依赖项，因此注意在同步代码中用到所有需要依赖的响应式对象。

watchEffect(async () => {
	await func(p1, p2);
	console.log(p3); // p3不会被添加为依赖项，因为他处在异步操作中，
})

watchEffect的第二个问题
watchEffect内部收集到的依赖直接也存在依赖关系，要如何处理

关于ref和reactive的选择

官方推荐多用ref，因为reactive存在一些使用限制，它只能作用于对象；不可替换响应式对象；解构后会丢失响应式。使用ref声明的响应式数据在使用时必须通过.value

关于Vite的lib模式打包

默认情况下vite用lib模式打包，源代码中的css部分会单独打包出一个文件，可以使用vite-plugin-css-injected-by-js插件将css部分内联注入进js文件中，而无需手动引入css文件。
而图片资源默认情况下全部强制打包进js文件中，以base64的格式存在，通过插件@laynezh/vite-plugin-lib-assets能够提取出其中的资源，配置项参考

tailwindcss 使用

在vite中通过postcss引入tailwindcss

首先需要安装依赖，除了tailwindcss本身还需要两个同级依赖，tailwindcss依赖postcss来处理和转换css文件，autoprefixer则负责自动为css添加浏览器前缀实现兼容性。

# 安装tailwindcss 及其同级依赖；
pnpm add -D tailwindcss postcss autoprefixer
# 生成tailwind.config.js 以及 postcss.config.js
npx tailwindcss init -p

然后配置tailwind.config.js和配postcss.config.js文件

// tailwind.config.js
export default {
	content: {
		// 要使用tailwindcss的文件
		"./src/**/*.{vue, js, ts, jsx, tsx}"
	}
	// 剩余配置参考官方文档
}

在css文件引入tailwind指令

/* style.css */
/* ...other css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在upgrade guide查查看tailwindcss的新特性

tailwindcss支持所有修饰类，包括:

• 伪类如hover，focus，:first-child
• 伪元素 ::before, ::after, ::placeholder
• 媒体和功能查询 比如响应式，黑暗模式
• 任意css属性选择器 比如[dir="rtl"]

在VSCode添加tailwindcss插件

vite 配置API

pregrocessorOptions
传递给CSS预处理器的选项，