uniapp vue3.0写法的最佳实践是什么

“在uniapp中使用vue3.0开发时，有哪些值得推荐的最佳实践？比如在组件设计、状态管理、性能优化等方面，应该如何合理运用vue3.0的特性？有没有一些实际项目中的经验可以分享？”

2 回复

uniapp + Vue3 最佳实践：使用组合式API，逻辑复用用setup；用ref和reactive管理状态；生命周期用onMounted等；样式用rpx适配多端；条件编译处理平台差异；分包优化首屏加载。


在 UniApp 中使用 Vue 3.0 的最佳实践如下：

1. 使用 Composition API

  • 推荐使用 setup() 语法或 <script setup> 语法糖，提高代码可读性和复用性。
  • 示例（<script setup>）：
    <script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
const increment = () => count.value++

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <view @click="increment">{{ count }}</view>
</template>

2. 状态管理

  • 简单场景使用 ref 或 reactive，复杂跨组件状态推荐 Pinia（替代 Vuex）。
  • 安装 Pinia：npm install pinia，在 main.js 中配置。
  • 示例：
    // stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

3. 生命周期适配

  • 使用 Vue 3 生命周期钩子（如 onMounted），但注意 UniApp 页面生命周期需通过 onLoad 等适配。
  • 示例：
    <script setup>
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
  console.log('页面加载')
})
</script>

4. 条件编译

  • 使用 #ifdef 和 #ifndef 处理多端差异。
  • 示例：
    <template>
  <view>
    #ifdef H5
    <p>仅 H5 显示</p>
    #endif
  </view>
</template>

5. 样式与响应式单位

  • 使用 rpx 实现响应式布局，避免直接使用 px。
  • 示例：
    .container {
  width: 750rpx; /* 适配屏幕宽度 */
}

6. 性能优化

  • 使用 v-if 和 v-show 合理控制组件渲染。
  • 长列表用 <scroll-view> 并避免过度响应式数据。

7. 路由与导航

  • 使用 uni.navigateTo 等 API，配合 onLoad 参数传递。
  • 示例：
    uni.navigateTo({
  url: '/pages/detail?id=1'
})

8. 第三方库兼容

  • 确保库支持 Vue 3 和 UniApp（如 uni-request 替代 axios）。

遵循这些实践可提升开发效率和应用性能。根据项目需求灵活调整。

回到顶部