UniApp 结合 Vue3 可以为开发者提供一个强大的跨平台应用开发框架，通过一套代码即可编译到 iOS、Android、Web、以及各种小程序等平台。以下是一些结合 Vue3 的 UniApp 开发技巧和知识点，旨在帮助开发者提高开发效率、优化应用性能。

1. 使用 Composition API

Vue3 引入了 Composition API，提供了一种更灵活的代码组织方式。在 UniApp 中使用 Composition API，可以更好地重用逻辑代码，特别适合构建大型应用或组件。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('Component is mounted!');
    });

    return { count, increment };
  }
};

这个示例中，ref 用于创建响应式数据，onMounted 用于处理组件挂载完成后的逻辑，setup 函数是 Composition API 的入口点，允许我们组织和返回响应式状态。

2. 响应式 Refs 和 Reactivity API

Vue3 的响应式系统得到了重写和优化，使用 ref 和 reactive 等 API，可以更加直观和灵活地定义响应式数据。

import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello, UniApp with Vue3');

    setTimeout(() => {
      title.value = 'Title Updated';
    }, 2000);

    return { title };
  }
};

这里，title 是一个响应式引用，通过修改它的 value 属性，可以更新与之绑定的视图。

3. 使用 Composition API 提供的生命周期钩子

Vue3 的 Composition API 提供了对应于传统生命周期钩子的函数，如 onMounted、onUpdated 和 onUnmounted 等。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is now mounted.');
    });
  }
};

利用这些生命周期钩子，可以在合适的时机执行逻辑，如获取数据、设置监听等。

4. Teleport - 模态框和弹窗的管理

Vue3 引入了 Teleport 组件，允许你将子节点渲染到存在于不同部分的 DOM 节点。

<template>
  <Teleport to="body">
    <div v-if="modalOpen" class="modal">
      <!-- 模态框内容 -->
    </div>
  </Teleport>
</template>

这对于在 UniApp 中创建模态框和弹窗特别有用，因为它们通常需要渲染到应用的顶层。

5. 性能优化

• v-if vs v-show：根据需要选择使用 v-if（条件渲染元素）还是 v-show（通过 CSS 切换显示）。
• 使用 v-for 时添加 key：这有助于 Vue3 更高效地重用元素。
• 避免过度使用全局组件：全局组件可能会增加初始化加载时间，考虑按需导入。

6. 跨平台样式处理

使用 UniApp 开发跨平台应用时，需要注意不同平台的样式适配。UniApp 提供了条件编译和 SCSS/Sass 等预处理器的支持，帮助你更好地管理和适配样式。

/* 使用 SCSS 条件编译 */
/* #ifdef H5 */
.nav-bar {
  background-color: #000;
}
/* #endif */

/* #ifndef H5 */
.nav-bar {
  background-color: #fff;
}
/* #endif */

在这个示例中，.nav-bar 的背景色会根据平台不同而有不同的表现。

7. 利用 Vue3 的 Provide / Inject 实现跨组件通信

在复杂的应用中，组件间的通信是一个常见的挑战。Vue3 提供了 provide 和 inject API，允许祖先组件提供数据，然后在其所有子孙组件中可以注入这些数据。

// 祖先组件
import { provide } from 'vue';

export default {
  setup() {
    const user = ref('John Doe');
    provide('userName', user);
  }
};

// 子孙组件
import { inject } from 'vue';

export default {
  setup() {
    const userName = inject('userName');
    return { userName };
  }
};

这种方式特别适用于深层嵌套的组件树，可以有效避免 "props 钻" 的问题。

8. 使用动态组件 & 异步组件优化应用结构和性能

Vue3 支持动态组件和异步组件，有助于构建更加灵活和高效的应用。

• 动态组件 可以根据需要动态切换不同的组件，而不是静态地在模板中列出所有可能的组件。

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

export default {
  data() {
    return {
      currentComponent: ComponentA
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === ComponentA ? ComponentB : ComponentA;
    }
  }
};
</script>

• 异步组件 可以将组件的加载延迟到真正需要时进行，这对于提升大型应用的加载时间非常有帮助。

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComp: defineAsyncComponent(() =>
      import('./AsyncComp.vue')
    )
  }
};

9. 使用 Custom Directives 自定义指令

Vue3 允许创建自定义指令，提供了一种强大的方法来直接操作 DOM。

import { DirectiveBinding } from 'vue';

const focusDirective = {
  mounted(el: HTMLElement) {
    el.focus();
  }
};

export default {
  directives: {
    focus: focusDirective
  }
};

在这个例子中，v-focus 指令可以用来自动聚焦元素。

10. 利用 Vue3 的 Reactivity API 进行状态管理

虽然 Vuex 是 Vue 的官方状态管理库，但 Vue3 的响应式 API 提供了更灵活的方式来构建自定义状态管理逻辑。

import { reactive, computed } from 'vue';

const state = reactive({
  count: 0
});

const increment = () => {
  state.count++;
};

const countDouble = computed(() => state.count * 2);

export default {
  setup() {
    return { state, increment, countDouble };
  }
};

这个示例展示了如何使用 reactive 和 computed 构建一个简单的状态管理系统。

11. 优化长列表性能

对于渲染长列表，Vue3 提供了 v-for 指令结合 v-memo 的优化技巧。

<template>
  <div v-for="(item, index) in list" :key="item.id" v-memo="[item.value]">
    {{ item.text }}
  </div>
</template>

v-memo 可以减少不必要的 DOM 更新，通过比较依赖项数组中的值来决定是否重新渲染组件，这对于优化大型列表或表格的性能非常有效。

通过掌握这些技巧和知识点，你可以更加充分地利用 UniApp 和 Vue3 的强大功能，构建出高性能、易维护且功能丰富的跨平台应用。在应用这些高级特性时，记得持续关注性能和用户体验，确保你的应用既高效又易用。

如果对你有帮助并且也喜欢，可以点赞收藏留言，关注哟~