wevu

┌─────────────────────────────────────────────┐
│               开发者代码                      │
│   ref() / reactive() / computed() / watch() │
└──────────────┬──────────────────────────────┘
               │ @vue/reactivity 依赖追踪
┌──────────────┴──────────────────────────────┐
│              wevu 运行时                      │
│  ┌─────────────┐  ┌──────────────────────┐  │
│  │ 响应式系统   │  │ 快照 diff 引擎       │  │
│  │ (reactivity) │  │ (snapshot → setData) │  │
│  └─────────────┘  └──────────────────────┘  │
│  ┌─────────────┐  ┌──────────────────────┐  │
│  │ 生命周期桥接 │  │ 事件系统             │  │
│  │ (onLoad →   │  │ (bind:tap → handler) │  │
│  │  onUnmount) │  │                      │  │
│  └─────────────┘  └──────────────────────┘  │
└──────────────┬──────────────────────────────┘
               │ 最小化 setData 调用
┌──────────────┴──────────────────────────────┐
│           微信小程序原生层                     │
│         Page() / Component() / setData()     │
└─────────────────────────────────────────────┘

# 创建 Wevu 项目（推荐方式）
npm create weapp-vite@latest -- --template wevu

# 或手动安装
npm install wevu

import { ref, reactive, computed } from 'wevu';

// 页面中使用
Page({
  setup() {
    // 响应式基本类型
    const count = ref(0);
    
    // 响应式对象
    const user = reactive({
      name: '张三',
      age: 25
    });
    
    // 计算属性（自动依赖追踪）
    const doubleCount = computed(() => count.value * 2);
    
    // 修改数据 → 自动触发 setData（仅 diff 变化部分）
    const increment = () => {
      count.value++;
    };
    
    return { count, user, doubleCount, increment };
  }
});

<!-- 支持 Vue 风格指令 -->
<view class="container">
  <text>{{ count }}</text>
  <text>Double: {{ doubleCount }}</text>
  <button bind:tap="increment">+1</button>
  
  <!-- v-if 条件渲染 -->
  <view v-if="count > 10">Count is large!</view>
  
  <!-- v-for 列表渲染 -->
  <view v-for="item in list" :key="item.id">
    {{ item.name }}
  </view>
</view>

// store/user.ts — 模块级响应式状态
import { reactive, computed } from 'wevu';

export const userStore = reactive({
  token: '',
  userInfo: null as UserInfo | null,
});

export const isLoggedIn = computed(() => !!userStore.token);

export function login(token: string, info: UserInfo) {
  userStore.token = token;
  userStore.userInfo = info;
}

// 页面 A
Page({
  setup() {
    return { isLoggedIn, userStore };
  }
});

// 页面 B — 自动同步响应
Page({
  setup() {
    return { isLoggedIn };
  }
});

// 在 app.js 入口引入，自动注册 polyfill
import '@wevu/web-apis/install';

// 现在可以在小程序中使用标准 Web API
fetch('/api/data').then(r => r.json());
localStorage.setItem('key', 'value');