Vue3 的 JSX 函数组件，每次更新都会重新运行吗？

英俊潇洒美少年2026-03-27 14:35

我用最直白、最无歧义、100%准确的方式，只回答你这一个问题：

✅ 最终答案（背它）

在 Vue3 中：
你写的 JSX 函数组件，整个函数只会在组件初始化时运行 1 次！
更新时，整个函数不会重新执行！

用代码证明

jsx 复制代码

import { ref } from 'vue'

// 这是你的 JSX 函数组件
export default function MyComp() {
  // 👇 整个函数体里的代码，**只执行 1 次！！！**
  console.log("函数执行了 ------ 只出现一次")

  const count = ref(0)

  // 👇 这个返回的渲染函数，**更新时会重新执行**
  return () => {
    console.log("渲染执行 ------ 更新就跑")
    return <div>{count.value}</div>
  }
}

运行结果：

初始化：
函数执行了 ------ 只出现一次
渲染执行 ------ 更新就跑
点击更新 count：
渲染执行 ------ 更新就跑
函数本身不会再跑！

最核心原理（一句话）

Vue3 把 JSX 函数当作 setup() 来用：
函数本身 = 只跑一次的初始化
返回的函数 = 每次更新都跑的渲染

你写的：

jsx 复制代码

function MyComp() {
  return () => <div />
}

Vue 底层理解为：

js 复制代码

const MyComp = {
  setup() {
    // 这里只执行一次
    return () => <div /> // 这里更新执行
  }
}

最精简总结（面试必背）

Vue3 JSX 函数组件：
组件函数本身 → 只执行 1 次（初始化）
返回的渲染函数 → 更新时会重新执行

绝对不会像 React 那样，整个函数每次更新都从头跑到尾！

Vue3 + React 函数组件执行机制一张图彻底分清

结合我们之前的对话，我为你整理Vue3 JSX 函数组件 vs React 函数组件的核心执行机制对比，用最清晰的方式帮你彻底区分，同时结合 Vue3 的底层原理，解决你的核心疑问：

Vue3 JSX 函数组件 vs React 函数组件执行机制对比

对比维度	Vue3 JSX 函数组件	React 函数组件
外层函数执行次数	仅初始化执行1次	每次更新都重新执行
响应式状态创建	仅初始化创建1次	每次更新重新创建
内部函数创建	仅初始化创建1次	每次更新重新创建
闭包陷阱	无（天然规避）	存在（依赖 Hooks 解决）
性能开销	低（无重复创建）	高（需 useMemo/useCallback 优化）
核心机制	setup + 渲染函数分离	函数重执行 + Hooks 状态保存