TinySearchBox 综合搜索组件重磅更新：实现 Vue 2 和 Vue 3 双版本适配！

作者：OpenTiny社区

2025-12-19
广东
本文字数：3150 字
阅读完需：约 10 分钟

TinySearchBox 综合搜索组件重磅更新：实现 Vue 2 和 Vue 3 双版本适配！

"一次编写，到处运行" —— 这次我们真的做到了！🎊

📢 重大更新

经过团队的努力，TinySearchBox 再度重构！采用全新的 Renderless 架构（实现原理下期给大家详细介绍），TinySearchBox 现在正式支持：

✅ 一套代码，两个版本， Vue 2 和 Vue 3 双版本支持

这意味着什么？无论你的项目是 Vue 2 还是 Vue 3，TinySearchBox 都能完美适配！

🚀 快速开始

Vue 3 项目

npm install @opentiny/vue-search-box@3.27.1

复制代码

<template>  <tiny-search-box v-model="tags" :items="items" /></template>
<script setup>import { ref } from 'vue'import TinySearchBox from '@opentiny/vue-search-box'
const tags = ref([])const items = ref([  {    label: '名称',    field: 'name',    options: [      { label: '选项1' },      { label: '选项2' }    ]  }])</script>

复制代码

Vue 2 项目

npm install @opentiny/vue-search-box@2.27.1

复制代码

<template>  <tiny-search-box v-model="tags" :items="items" /></template>
<script>import TinySearchBox from '@opentiny/vue-search-box'
export default {  components: {    TinySearchBox  },  data() {    return {      tags: [],      items: [        {          label: '名称',          field: 'name',          options: [            { label: '选项1' },            { label: '选项2' }          ]        }      ]    }  }}</script>

复制代码

📦 版本说明

包名和版本对应表

选择指南：

🎯 Vue 3 项目：使用 3.27.1 版本
🎯 Vue 2 项目：使用 2.27.1 版本

🛠️ 技术实现：Renderless 架构

🤔 为什么能做到"一套代码，两个版本"？

答案就是：Renderless 架构！

核心思路

┌─────────────────────────────────────┐│     一套源代码 (src/)                ││  - index.ts (入口)                  ││  - pc.vue (模板)                    ││  - renderless.ts (逻辑)             │└─────────────────────────────────────┘              ↓┌─────────────────────────────────────┐│   构建时适配 (vite.config.*.ts)      ││  - vue2.ts → Vue 2 构建             ││  - vue3.ts → Vue 3 构建             │└─────────────────────────────────────┘              ↓┌─────────────────────────────────────┐│   两个独立包 (dist/)                 ││  - vue2/                            ││  - vue3/                            │└─────────────────────────────────────┘

复制代码

关键技术点

1. @opentiny/vue-common - 兼容层魔法

vue-common 是核心兼容层，它：

提供统一的 API（defineComponent、setup、reactive 等）
自动适配 Vue 2 和 Vue 3 的差异
让开发者无需关心底层实现

// 在 renderless.ts 中import { defineComponent, setup } from '@opentiny/vue-common'
// 这个代码在 Vue 2 和 Vue 3 中都能运行！export const renderless = (props, hooks, context) => {  const { reactive, computed, watch } = hooks  // ... 业务逻辑}

复制代码

2. 逻辑与模板分离

模板层（pc.vue）：只负责 UI 展示
逻辑层（renderless.ts）：处理所有业务逻辑
入口层（index.ts）：统一对外接口

这样的设计让：

逻辑可以在不同版本间复用
模板可以根据版本调整
代码组织更清晰

3. 构建时适配

通过不同的 Vite 配置，在构建时：

Vue 2 版本：使用 vite-plugin-vue2 和 Vue 2 运行时
Vue 3 版本：使用 @vitejs/plugin-vue 和 Vue 3 运行时

// vite.config.vue2.tsimport vue2 from 'vite-plugin-vue2'// 使用 Vue 2 构建
// vite.config.vue3.tsimport vue from '@vitejs/plugin-vue'// 使用 Vue 3 构建

复制代码

4. 样式系统

普通主题：使用 Less，编译为 CSS

// theme/index.less - 普通主题.tv-search-box {  // 传统样式}

复制代码

💡 实现方案详解

方案架构图

源代码层├── src/│   ├── index.ts          # 组件入口│   ├── pc.vue            # 模板（UI）│   ├── renderless.ts     # 逻辑（业务）│   └── composables/      # 功能模块│构建配置层├── vite.config.vue2.ts           # Vue 2 构建└── vite.config.vue3.ts       # Vue 3 构建│样式层└── theme/            # 主题样式    └── index.less│输出层└── dist/    ├── vue2/            # Vue 2 包    └── vue3/            # Vue 3 包

复制代码

关键技术实现

1. Renderless 架构

export const renderless = (  props,                    // 组件属性  hooks,                    // Vue 响应式 API（来自 vue-common）  context                   // 上下文（emit, nextTick, vm 等）) => {  // 业务逻辑  return api                // 返回给模板使用的 API}

复制代码

关键点：

hooks 来自 vue-common，自动适配 Vue 2/3
context 统一了 Vue 2/3 的差异（如 emit、slots）
返回的 api 对象会被注入到模板中

2. 模板连接

<!-- pc.vue --><script lang="ts">import { defineComponent, setup } from '@opentiny/vue-common'import { renderless, api } from './renderless'
export default defineComponent({  setup(props, context) {    // 关键：通过 setup 连接 renderless    return setup({ props, context, renderless, api })  }})</script>

复制代码

关键点：

setup 函数来自 vue-common
自动处理 Vue 2/3 的差异
将 renderless 返回的 API 注入到模板

🎯 使用场景

场景 1：Vue 2 老项目升级

问题：你的项目还在用 Vue 2，但想用现代化的搜索组件？

解决方案：直接安装 Vue 2 版本！

npm install @opentiny/vue-search-box@2.27.1

复制代码

无需升级 Vue，无需重构代码，开箱即用！

场景 2：Vue 3 新项目

问题：新项目想用最新的技术栈？

解决方案：使用 Vue 3 版本！

npm install @opentiny/vue-search-box@3.27.1

复制代码

享受 Vue 3 的性能优势和 Composition API！

🔥 核心优势

1. 真正的"一次编写，到处运行"

✅ 一套源代码
✅ 两个构建版本
✅ 零代码差异

2. 完美的兼容性

✅ Vue 2.6.14+ 支持
✅ Vue 3.x 支持
✅ TypeScript 支持
✅ 完整的类型定义

3. 灵活的主题系统

✅ 主题：经典企业级风格
✅ 支持样式定制

4. 优秀的开发体验

✅ 完整的 TypeScript 类型
✅ 详细的文档和示例
✅ 丰富的 API
✅ 活跃的社区支持

📚 文档资源

📖 使用指南
💻 在线示例

🎊 总结

TinySearchBox 现在真正做到了：

🎯 Vue 2 和 Vue 3 全支持 - 维护成本低，兼容性高
💪 Renderless 架构 - 代码组织清晰，易于扩展

还在等什么？赶紧试试吧！ 🎉

# Vue 3 项目npm install @opentiny/vue-search-box@3.27.1
# Vue 2 项目npm install @opentiny/vue-search-box@2.27.1

复制代码

🤝 贡献与反馈

🐛 发现问题？提交 Issue
💡 有好的想法？提交 PR
⭐ 觉得不错？给个 Star 吧！

Happy Coding! 🎉

记住：选择 TinySearchBox，就是选择了兼容性、灵活性和可维护性！

关于 OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design

OpenTiny 代码仓库：https://github.com/opentiny

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/59ef333f0d407eb9d98d8f90f】。

OpenTiny社区

关注

OpenTiny 企业级web前端开发解决方案 2023-06-06 加入

官网：opentiny.design 我们是华为云的 OpenTiny 开源社区，会定期为大家分享一些团队内部成员的技术文章或华为云社区优质博文，涉及领域主要涵盖了前端、后台的技术等。

发布

暂无评论

创作场景

TinySearchBox 综合搜索组件重磅更新：实现 Vue 2 和 Vue 3 双版本适配！

📢 重大更新

🚀 快速开始

Vue 3 项目

Vue 2 项目

📦 版本说明

包名和版本对应表

🛠️ 技术实现：Renderless 架构

🤔 为什么能做到"一套代码，两个版本"？

核心思路

关键技术点

1. @opentiny/vue-common - 兼容层魔法

2. 逻辑与模板分离

3. 构建时适配

4. 样式系统

💡 实现方案详解

方案架构图

关键技术实现

1. Renderless 架构

2. 模板连接

🎯 使用场景

场景 1：Vue 2 老项目升级

场景 2：Vue 3 新项目

🔥 核心优势

1. 真正的"一次编写，到处运行"

2. 完美的兼容性

3. 灵活的主题系统

4. 优秀的开发体验

📚 文档资源

🎊 总结

🤝 贡献与反馈

关于 OpenTiny

OpenTiny社区

评论