Vue3 的 JSX 函数组件,每次更新都会重新运行吗?
我用最直白、最无歧义、100%准确的方式只回答你这一个问题✅ 最终答案背它在 Vue3 中你写的 JSX 函数组件整个函数 只会在组件初始化时运行 1 次更新时整个函数 不会重新执行用代码证明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() 来用函数本身 只跑一次的初始化返回的函数 每次更新都跑的渲染你写的function MyComp() { return () div / }Vue 底层理解为constMyComp{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 状态保存
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2453047.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!