全生态释放

本章演示：在 Vue SFC 中直接接入 React 生态（TanStack Query + Zustand），用于覆盖“没有适配包时如何落地”的现实场景。

1. 输入示例（实验性混写）

<template>
  <section>
    <h3>{{ title }}</h3>

    <p>global count: {{ globalCount }}</p>
    <button @click="incGlobal">inc global</button>

    <p v-if="query.isPending">loading...</p>
    <p v-else-if="query.isError">failed</p>
    <ul v-else>
      <!-- jsx map 语法 -->
      {query.data.map(item =>
        <li key={item.id}>{item.title}</li>
      )}
    </ul>
  </section>
</template>

<script setup lang="ts">
// @vr-name: MindControlChaos
import { useEffect } from 'react';
import { ref } from 'vue';
import { useQuery } from '@tanstack/react-query';
import { create } from 'zustand';

const title = ref('Mind Control - Chaos Mode');

// React API 直连
useEffect(() => {
  console.log('title', title.value)
},[title.value]);

// Zustand 直连
const useCounterStore = create<{ count: number; inc: () => void }>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));

const globalCount = useCounterStore((s) => s.count);
const incGlobal = useCounterStore((s) => s.inc);

// TanStack Query 直连
const query = useQuery({
  queryKey: ['todos'],
  queryFn: async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=3');
    return res.json();
  },
});
</script>

2. 你必须自己兜住的部分

1. React Provider 体系（如 QueryClientProvider）要在应用入口正确接好。
2. 生态库版本和 React 版本兼容性由项目自行管理。
3. 一旦写法越界，问题通常不是编译器能自动修复的。
4. 手动管理 React Hook 依赖（编译器处理范围内的 API 除外）。

3. 风险清单

1. 心智模型切换失败会导致“看似能编译、实际不可维护”。
2. Hook 依赖和状态来源混乱后，调试成本极高。
3. 团队成员若不熟悉双栈，接手成本会显著上升。
4. 专属于 VuReact 能运行，而 Vue 无法处理。

4. 建议的落地方式

1. 先在隔离目录或实验模块试点。
2. 先建立团队代码评审清单（Vue 规则 + React 规则）。
3. 在 CI 中加入更严格的 lint 与类型检查。
4. 定期回收“暴走写法”，把可沉淀能力迁回稳定模式。