Slidev项目中组件代码执行两次的原因与解决方案

在Vue.js和Slidev项目开发过程中，开发者可能会遇到一个常见现象：在<script setup>语法糖中编写的组件代码会被执行两次。这种现象并非错误，而是Slidev框架设计的预期行为。

现象描述

当我们在Slidev项目中使用<script setup>语法定义组件时，例如创建一个计数器组件，组件内部的逻辑代码（如console.log语句）会在页面刷新时执行两次。这可能会让一些开发者感到困惑，尤其是当代码中包含副作用操作时。

原因分析

这种现象的根本原因在于Slidev框架的特殊架构设计：

1. 双实例机制：Slidev为了同时支持主播放视图和幻灯片概览视图，会为每个幻灯片组件创建两个实例
2. 组件生命周期：每个组件实例都会独立执行<script setup>中的代码
3. 渲染优化：这种设计允许Slidev在不重新加载整个应用的情况下快速切换视图

解决方案

对于需要在组件中只执行一次的代码，可以采用以下方法：

1. 分离脚本块：在组件中同时使用常规<script>块和<script setup>块
2. 状态管理：将需要保持唯一状态的逻辑提升到父组件或Pinia/Vuex等状态管理工具中
3. 执行控制：使用标志变量控制代码执行次数

最佳实践建议

1. 副作用处理：在<script setup>中避免直接执行具有副作用的操作
2. 响应式设计：确保组件能够正确处理多次初始化的场景
3. 性能优化：对于计算量大的初始化操作，考虑使用缓存或记忆化技术

理解这一设计特点有助于开发者更好地在Slidev项目中编写健壮的组件代码，避免因多次执行导致的意外行为。