Vue.js运行代码于mounted并实现重启功能

技术背景

在使用Vue.js创建游戏时，通常需要在页面加载时执行一些初始化操作，如进行API调用并创建数据属性。当玩家赢得一轮游戏后，可能希望提供一个重启游戏的功能。而游戏的初始化代码通常放在mounted()钩子中，但mounted()钩子在组件挂载时只会执行一次，所以需要找到一种方法来实现重启功能。

实现步骤

方法一：抽象初始化方法

将初始化逻辑抽象成一个方法，然后在mounted()钩子和需要重启的地方调用该方法。

1. 在Vue实例中定义一个init()方法，用于处理游戏的初始化逻辑，如调用API和设置游戏状态。
2. 在mounted()钩子中调用init()方法，确保页面加载时执行初始化操作。
3. 在模板中添加一个按钮，当玩家赢得游戏时显示该按钮，并绑定init()方法，点击按钮时重启游戏。

方法二：使用Vue 3组合式API

使用Vue 3的组合式API中的onMounted和watch钩子来实现重启功能。

1. 在setup()函数中定义一个响应式变量win，用于跟踪玩家是否赢得游戏。
2. 使用watch监听win变量的变化，当玩家赢得游戏时，调用init()方法重启游戏。
3. 使用onMounted钩子在组件挂载时调用init()方法进行初始化。

方法三：将mounted逻辑提取到顶层作用域

将mounted逻辑提取到顶层作用域，使其成为一个独立的函数，然后在Vue实例中调用该函数。

1. 定义一个独立的init()函数，在函数内部使用this正常访问Vue实例的属性和方法。
2. 在Vue实例的methods选项中引用init()函数。
3. 在mounted()钩子中使用call()方法调用init()函数，并将this作为上下文传递。

核心代码

方法一代码示例

new Vue({
  methods: {
    init() {
      // 调用API
      // 设置游戏
    }
  },
  mounted() {
    this.init();
  }
});

// 模板中的按钮
<button v-if="playerWon" @click="init">再次游戏</button>

方法二代码示例

import { ref, onMounted, watch } from 'vue';

export default {
  setup() {
    const win = ref(false);

    watch(win, (newVal) => {
      if (newVal) {
        init();
      }
    });

    onMounted(() => {
      init();
    });

    function init() {
      // 初始化逻辑
    }
  }
};

方法三代码示例

function init() {
  // 正常使用this
}

new Vue({
  methods: {
    init
  },
  mounted() {
    init.call(this);
  }
});

最佳实践

• 单一职责原则：将初始化逻辑封装在一个独立的方法中，提高代码的可维护性和可复用性。
• 选择合适的钩子：根据具体需求选择合适的钩子来执行初始化操作。如果不需要访问渲染后的DOM元素，可以使用created钩子；如果需要访问渲染后的DOM元素，则使用mounted钩子。

常见问题

• 钩子顺序问题：在某些情况下，钩子的顺序可能会影响代码的执行。例如，在方法一的代码示例中，mounted块的位置可能会影响代码的执行，确保mounted块在methods选项之后定义。
• 上下文问题：在将mounted逻辑提取到顶层作用域时，需要注意this的上下文。使用call()或apply()方法确保this指向Vue实例。