Vue.js 如何让组件首次接收到props时触发watch监听回调执行

核心修改方式 #

Vue默认的watch触发规则是仅当被监听属性发生后续变更时才运行回调，只要给监听项加上immediate: true配置，就能让回调在组件初始化、被监听值首次完成计算/注入时立刻执行一次，完全匹配首次接收到props就运行逻辑的需求。

直接修改现有watch区域的allOptions监听配置即可，把原来的函数式写法替换成带配置的对象格式：

watch: {
  currentQuestion() {
    this.selectedIndex = null;
  },
  allOptions: {
    // 开启后，首次计算出allOptions的值时就会立刻执行回调
    immediate: true,
    handler(newVal) {
      console.log("I am second");
      // 直接使用回调传入的最新值，无需重复读取实例上的属性
      this.correctIndex = newVal.indexOf(
        this.currentQuestion.correct_answer
      );
      console.log("Correct index isss", this.correctIndex);
    }
  }
}

方案说明 #

• 开启immediate后，不管是组件初始化阶段props首次注入、计算属性第一次生成值，还是后续currentQuestion变更触发allOptions重新计算，回调都会正常执行，不需要单独写初始化的重复逻辑
• 因为allOptions本身就是依赖currentQuestion生成的计算属性，当它的回调首次触发时，说明currentQuestion已经完成了props注入，不会出现读取不到属性的报错

可选优化点 #

当前监听allOptions的逻辑本质是跟着currentQuestion的变化走的——allOptions本身就是从currentQuestion的字段衍生出来的，完全可以跳过对计算属性的监听，直接给currentQuestion的watch加上immediate配置，把correctIndex的计算逻辑合并进去，减少不必要的依赖追踪：

watch: {
  currentQuestion: {
    immediate: true,
    handler() {
      // 重置选中状态
      this.selectedIndex = null;
      // 计算正确答案在打乱后选项数组里的位置
      this.correctIndex = this.allOptions.indexOf(this.currentQuestion.correct_answer)
    }
  }
}

内容的提问来源于stack exchange，提问作者Abdullah Ch