Vue3等效React useEffect的实现方法 优化mounted与watch重复调用问题

现有Vue2代码优化方案 #

方案1：最小改动消除重复 #

你只需要给watch配置immediate: true属性，就可以让侦听器在初始化阶段自动执行一次，完全不用在mounted里重复调用getTodo()，改动后的核心代码如下：

export default {
  data() {
    return {
      title: '',
      content: '',
      lastEditTime: ''
    }
  },
  methods: {
    getTodo () {
      if (this.$store.state.list.length > 0) {
        const id = this.$route.params.id;
        const todoItem = this.$store.getters.getItem(id);
        Object.assign(this, todoItem);
      }
    }
  },
  watch: {
    '$store.state.list': {
      handler: 'getTodo', // 直接绑定方法名更简洁
      immediate: true // 初始化时立即执行一次
    } 
  }
  // 可直接删除整个mounted钩子
}

方案2：更简洁的计算属性实现 #

你的三个展示字段完全是由store状态和路由参数派生的，不需要额外声明响应式data和业务方法，直接用计算属性就能实现，代码量更少，响应式更新逻辑更直观：

<template>
  <div>
    <h2>Details Page</h2>
    {{ todoItem.title }}
    {{ todoItem.content }}
    {{ todoItem.lastEditTime }}
  </div>
</template>
<script>
export default {
  computed: {
    todoItem() {
      if (this.$store.state.list.length === 0) return {}
      return this.$store.getters.getItem(this.$route.params.id) || {}
    }
  }
}
</script>

Vue3对应React useEffect的等效方案 #

React的useEffect在Vue3中有两个对应实现：

• watch API：和Vue2的watch功能一致，需要手动指定侦听的依赖，默认仅在依赖变化时触发回调，可通过配置immediate: true实现初始化执行的效果。
• watchEffect API：不需要手动声明依赖，会自动收集回调函数中用到的所有响应式依赖，初始化时会自动执行第一次，依赖变化时也会重新执行，和useEffect的默认行为匹配度最高。

针对你的场景，Vue3 + Pinia + <script setup>的最简实现示例如下：

<template>
  <div>
    <h2>Details Page</h2>
    {{ todoItem.title }}
    {{ todoItem.content }}
    {{ todoItem.lastEditTime }}
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useTodoStore } from '@/stores/todo'

const route = useRoute()
const todoStore = useTodoStore()
const todoItem = computed(() => {
  if (todoStore.list.length === 0) return {}
  return todoStore.getItem(route.params.id) || {}
})
</script>

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