uni-app Vue3 Attribute 小程序 BUG

在使用 uni-app 开发小程序时，可能会遇到一些与 Vue3 相关的 Attribute BUG。以下是一些常见的问题及其解决方案：

1. v-bind 动态绑定问题

• 问题描述: 在 Vue3 中，使用 v-bind 动态绑定属性时，可能会遇到小程序端无法正确解析的问题。
• 解决方案: 确保在 v-bind 中使用正确的语法，并且避免在小程序端使用不支持的属性。可以尝试使用 :prop="value" 的简写形式。

<template>
  <view :class="dynamicClass">Hello World</view>
</template>

<script setup>
const dynamicClass = ref('active');
</script>

2. v-model 双向绑定问题

• 问题描述: 在小程序端，v-model 可能无法正常工作，尤其是在自定义组件中。
• 解决方案: 确保在自定义组件中正确实现 modelValue 和 update:modelValue 事件。如果问题仍然存在，可以尝试使用 @input 事件手动更新值。

<template>
  <custom-input v-model="inputValue" />
</template>

<script setup>
const inputValue = ref('');
</script>

3. v-for 渲染问题

• 问题描述: 使用 v-for 渲染列表时，可能会遇到小程序端渲染不正确或性能问题。
• 解决方案: 确保在 v-for 中使用 :key 属性，并且避免在循环中使用复杂的表达式。如果列表数据较大，可以考虑使用 virtual-list 组件来优化性能。

<template>
  <view v-for="item in items" :key="item.id">{{ item.name }}</view>
</template>

<script setup>
const items = ref([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
</script>

4. v-if 和 v-show 问题

• 问题描述: 在小程序端，v-if 和 v-show 的行为可能与预期不一致，尤其是在动态切换时。
• 解决方案: 确保在 v-if 和 v-show 中使用正确的条件表达式。如果需要在频繁切换时保持性能，优先使用 v-show。

<template>
  <view v-if="isVisible">Visible</view>
  <view v-show="isVisible">Also Visible</view>
</template>

<script setup>
const isVisible = ref(true);
</script>

5. ref 和 reactive 问题

• 问题描述: 在小程序端，ref 和 reactive 可能无法正确响应数据变化。
• 解决方案: 确保在 ref 和 reactive 中使用正确的数据类型，并且避免直接修改嵌套对象的属性。如果需要修改嵌套对象，可以使用 toRefs 或 watch 来监听变化。

<template>
  <view>{{ state.count }}</view>
  <button @click="increment">Increment</button>
</template>

<script setup>
const state = reactive({ count: 0 });
const increment = () => {
  state.count++;
};
</script>

6. watch 和 watchEffect 问题

• 问题描述: 在小程序端，watch 和 watchEffect 可能无法正确监听数据变化。
• 解决方案: 确保在 watch 和 watchEffect 中使用正确的依赖项，并且避免在监听器中执行复杂的逻辑。如果问题仍然存在，可以尝试使用 computed 属性来替代。

<template>
  <view>{{ count }}</view>
</template>

<script setup>
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

7. computed 计算属性问题

• 问题描述: 在小程序端，computed 计算属性可能无法正确更新。
• 解决方案: 确保在 computed 中使用正确的依赖项，并且避免在计算属性中执行副作用操作。如果问题仍然存在，可以尝试使用 watch 来监听依赖项的变化。

<template>
  <view>{{ doubleCount }}</view>
</template>

<script setup>
const count = ref(1);
const doubleCount = computed(() => count.value * 2);
</script>

8. provide 和 inject 问题

• 问题描述: 在小程序端，provide 和 inject 可能无法正确传递数据。
• 解决方案: 确保在 provide 和 inject 中使用正确的键值，并且避免在嵌套组件中重复提供相同的数据。如果问题仍然存在，可以尝试使用全局状态管理工具（如 Pinia）来替代。

<template>
  <child-component />
</template>

<script setup>
import { provide, ref } from 'vue';
const message = ref('Hello from parent');
provide('message', message);
</script>

9. teleport 问题

• 问题描述: 在小程序端，teleport 可能无法正确将组件渲染到目标位置。
• 解决方案: 确保在 teleport 中使用正确的目标选择器，并且避免在小程序端使用不支持的 DOM 操作。如果问题仍然存在，可以尝试使用 v-if 或 v-show 来手动控制组件的显示。

<template>
  <teleport to="#target">
    <div>Teleported Content</div>
  </teleport>
</template>

10. transition 和 transition-group 问题

• 问题描述: 在小程序端，transition 和 transition-group 可能无法正确应用动画效果。
• 解决方案: 确保在 transition 和 transition-group 中使用正确的 CSS 类名，并且避免在小程序端使用不支持的 CSS 属性。如果问题仍然存在，可以尝试使用小程序原生的动画 API 来替代。

<template>
  <transition name="fade">
    <view v-if="isVisible">Fade In/Out</view>
  </transition>
</template>

<script setup>
const isVisible = ref(true);
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>