网站模板 pc 移动版,营销策划岗位职责,萍乡做网站的,怎么样模仿一个网站做简历前情回顾 keep-alive 实现了页面缓存#xff0c;却抖出了另一个“遗产” 书接上回#xff0c;我们成功用 keep-alive 为页面添加了缓存机制#xff0c;刷新不抖、切页秒开#xff0c;体验直线上升。但随着项目深入#xff0c;又一个问题浮出水面#xff1a;
同一…前情回顾 keep-alive 实现了页面缓存却抖出了另一个“遗产” 书接上回我们成功用 keep-alive 为页面添加了缓存机制刷新不抖、切页秒开体验直线上升。但随着项目深入又一个问题浮出水面
同一个组件被多个路由复用导致缓存错乱、数据不对、逻辑不清。
我们一查发现这些页面公用了一个组件但每个路由的 name 和组件的 name 并不一致有的甚至用了同一套模板结构、不同的初始化数据和行为逻辑。
典型的“代码复用但逻辑乱套”留下的锅不背不行。 思路起飞逻辑重复就提炼模板相同就参数化
我第一反应是既然这些路由使用相同组件模板那它们的逻辑应该可以通过封装来复用。于是设想
把页面中重复的初始化逻辑抽离成一个函数或 mixin将页面中不同的初始化参数通过 props 或路由 meta 传入最后只保留一个组件根据入参动态渲染行为。
这不就实现了“路由不同逻辑不同组件复用还干净”嘛
但——作为一个 Vue3 用户我习惯用组合式函数来组织逻辑结果一到 Vue2 项目发现这一套用不了于是我提出这个改造建议交给团队评审。 用 Vue.extend 来实现
领导看完建议表示认同逻辑但建议用 Vue2 中更典型的方式来实现Vue.extend。
他提到这是 Vue2 早期广泛用于动态组件复用和差异化配置子组件的手法虽然 Vue3 已经弃用但在老项目里依然能优雅解决这一类问题。
于是我便深入学习这位“历史遗产”工具并逐步发现 Vue.extend 并不只是复用组件它其实是 Vue2 中控制“组件实例生命周期”的强力工具 下文我们就进入主线 Vue.extend 深度解析Vue2 的“继承”机制从何而来又将归往何处 从 Vue3 回望 Vue2Vue.extend 深度解析与终章告别 一、起点你在 Vue3 从未见过它但它曾一度风光无限
如果你已经习惯在 Vue3 中使用 defineComponent() 定义组件或者用组合式 API 封装逻辑模块那么你可能从未接触过 Vue2 的一个古老“神器”
const MyComponent Vue.extend({ ... })这行代码的本质是什么为什么很多早期的 UI 插件组件如 Message、Dialog都用它而 Vue3 又为什么彻底告别它
本文将从 Vue3 的认知出发拆解 Vue2 中 Vue.extend 的来龙去脉、应用场景、背后设计理念以及未来可替代方案。 二、定位Vue.extend 是什么
本质定义
Vue.extend() 是 Vue2 提供的用于创建组件构造器的工厂方法它接受一个组件配置对象返回一个“继承自 Vue”的组件类构造函数
const SubClass Vue.extend(options)
const instance new SubClass()你可以将它类比为
class MyComponent extends Vue { ... }它不是定义组件而是创造组件构造器为组件的动态实例化提供支持。 三、应用剖析这不是组件复用而是“控制组件的生命周期”
在 Vue2 中大部分组件都是通过模板引用的静态方式使用
templateMyCard /
/templatescript
import MyCard from ./MyCard.vue
export default { components: { MyCard } }
/script这适合绝大多数页面 UI 组件但不适合那些“随时出现、自动销毁”的功能型组件比如
组件类型示例特点消息提示类$message.success(操作成功)弹出即走无需用户挂载或控制对话框类$dialog.confirm(...)调用即现关闭即销毁Toast/Loadingthis.$toast(...)全局单例或动态生成无需依赖模板引用
这类组件具有两个特点
动态性强不能写在模板中需要代码触发生命周期控制需求高需要手动挂载、销毁 DOM 元素无法依赖父组件托管。
于是 Vue.extend 登场
const ToastConstructor Vue.extend(ToastComponent)
const instance new ToastConstructor({ propsData: { msg: Hello } })
instance.$mount()
document.body.appendChild(instance.$el)通过构造函数方式创建组件实例就能灵活实现手动创建 / 控制 / 销毁的能力。 四、Vue.extend 背后的理念继承优于组合
Vue.extend 反映出 Vue2 中一贯的“类式继承思维”
Vue 本身是一个类Vue 构造函数每一个组件都是基于 Vue 的“子类”Vue.extend 就是子类工厂生成继承链new SubClass() 就是手动 new 出一个组件。
这种思路与 JavaScript 传统的面向对象非常契合但它也有明显的问题
问题描述类型系统割裂Vue.extend 返回的是构造器和 SFC 中的对象写法风格不一致难以推导类型TypeScript 难以推导组件的 props 类型不适合组合逻辑每个子类是“黑箱”难以组合、复用逻辑破坏响应式边界手动挂载组件 DOM绕过了 Vue 的虚拟 DOM 控制机制 五、Vue3 的抉择从继承走向组合
Vue3 正式移除 Vue.extend用更统一、更现代的方式来处理“动态组件”的需求
import { createVNode, render } from vue
import Message from ./Message.vueexport function showMessage(text) {const container document.createElement(div)const vnode createVNode(Message, { text })render(vnode, container)document.body.appendChild(container)
}新方案的优点
函数式不需要继承只需组件 调用类型安全配合 defineComponent 和 TS 推导响应式保持仍走虚拟 DOM 渲染链路拓展性强可以组合式组织复杂逻辑、异步销毁等。 六、Vue2 项目最佳实践建议
如果你仍在使用 Vue2 且想保持组件动态特性可以继续使用 Vue.extend但建议
将其封装在工具函数中对外提供函数式调用模拟 Vue3 风格避免在页面组件中直接 new 实例为迁移做准备设计时保持 propsData/挂载容器结构的一致性可以尝试使用第三方桥接工具如 vue-demi为 Vue2/3 写兼容版本 总结
对比维度Vue2 Vue.extendVue3 推荐方式定义方式Vue.extend(options)defineComponent() VNode render核心理念类式继承函数组合 声明式渲染动态能力✅ 强需手动挂载/销毁✅ 强通过 createVNode render 实现生命周期掌控✅ 手动 $mount/$destroy✅ 灵活控制通过容器 DOM未来兼容性❌ Vue3 中已废弃✅ 兼容性强 Vue.extend 是 Vue2 时代的“权宜之计”在动态组件不成熟的早期它为弹窗类组件打开了一扇门。但随着 Vue3 的函数化重构这扇门如今已然关闭。写得越组合未来越轻松。 加餐Vue.extend 在复用逻辑场景下的实战用法
在我们最初的场景中也可以借助 Vue.extend 来解决“多个路由共用组件”的逻辑分化问题。
比如原来我们有多个业务页面都用的是 UserPage.vue只是根据路由不同初始化的数据不一样可以这样处理
// 创建一个基础构造器
const BaseUserPage Vue.extend(UserPage)// 创建不同的构造器分支如不同角色
const AdminUserPage BaseUserPage.extend({data() {return {role: admin}}
})const EditorUserPage BaseUserPage.extend({data() {return {role: editor}}
})然后在路由中动态挂载不同构造器的实例
const routes [{path: /admin,component: AdminUserPage},{path: /editor,component: EditorUserPage}
]当然实际中我们通常不会这么静态硬编码子类而是写一个创建器工厂来生成对应构造器
function createUserPage(role) {return Vue.extend({extends: UserPage,data() {return { role }}})
}这种方式适合逻辑差异化显著但结构一致的场景。 Vue3 替代思路组合式逻辑重构更清晰
假如你现在在 Vue3 中遇到同样的问题应该怎么做
不用继承用组合函数
// useUserPage.ts
export function useUserPage(role: string) {const state reactive({ list: [], role })onMounted(() {fetchUserListByRole(role).then(res state.list res)})return { ...toRefs(state) }
}组件中只需调用即可
script setup
const route useRoute()
const { list, role } useUserPage(route.meta.role)
/script逻辑清晰、类型安全、解耦明显直接通向现代组件架构的大道。 最终感悟
历史遗产不是包袱而是上下文的一部分。你不需要“全盘接收”但你需要理解它为何存在才能更好地判断何时告别。 作为 Vue3 的开发者回望 Vue2不只是为了“重温旧梦”更是为了看清那些“进化的必然”。
