uniapp+vue3开发微信小程序踩坑集
探索使用uniapp+vue3开发微信小程序时可能遭遇的挑战与解决方案，本文旨在记录常见问题及注意点（持续更新）。
在面对自定义组件样式加不上去的问题时，需意识到组件默认可能为`display: inline`，导致块属性如`width`, `margin-top`, `margin-bottom`等不生效。解决方案是直接在自定义组件样式中添加`display: block`。
解决使用各种dialog组件导致的滚动穿透问题，本质在于禁用`touchmove`默认滚动行为。uniapp提供了`.stop`修饰符来阻止默认行为。然而，禁用`touchmove`会同时影响dialog组件内部滚动，若需内部滚动，则需借助`page-meta`标签作为根标签。
针对`unplugin-vue-components`插件不生效的情况，解决方法是在`vite.config.ts`文件中确保将其提前到`uni`插件之前，避免插件间的冲突。
正确与错误的写法对比示例，以确保插件配置顺序的准确性。
面对官方存在的坑，关注官方issue是解决问题的有效途径。
子组件中频繁使用`onShow`、`onPullDownRefresh`、`onReachBottom`导致接口重复触发问题的解决方法，是通过封装特定方法，在`onunmounted`中重置逻辑，避免闭包导致的重复执行。
解决`input`数据改变后页面没有实时更新问题，通过调整`showLoading`与`showToast`的时机使用`setTimeout`延迟`toast`的执行。
实现状态管理和持久化，推荐使用`pinia`作为全局状态管理工具，相较于`vuex`体验更优。持久化需求可通过`uni.setStorageSync()`实现，大量需求则引入`pinia-plugin-unistorage`插件。
原子化CSS的使用，如`unocss`，能有效解决关注点分离带来的困扰，提升开发效率。`UnoCSS`相较于`Tailwind CSS`具有按需生成class、更灵活的规则编写等优势，且完全兼容`Tailwind CSS`。
注意点包括不支持Vue的`render`、`inline-template`、`X-Templates`、`keep-alive`、`transition`等特性，以及`relaunch`与`redirectTo`、`navigateTo`的区别与用法。事件修饰符的使用也需遵循uniapp官方文档的规范。
理解生命周期的概念，uniapp小程序包含自身页面生命周期与Vue组件生命周期，确保在组件中正确应用如`onLoad`等生命周期方法。
以上内容旨在提供在uniapp+vue3开发微信小程序过程中可能遇到的问题及解决方案，通过持续优化和学习，开发者能够更高效地解决开发中的挑战。
多重随机标签