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 版本	主题风格	版本号
`@opentiny/vue-search-box`	Vue 3	普通主题	3.27.1
`@opentiny/vue-search-box`	Vue 2	普通主题	2.27.1

选择指南：

🎯 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.ts
import vue2 from 'vite-plugin-vue2'
// 使用 Vue 2 构建

// vite.config.vue3.ts
import 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 标签，一起参与开源贡献~