背景

我们都知道小程序与 Vue2 类似，采用了选项式 API，而 behaviors 是复用代码的唯一方式，类似于 Vue2 的 mixins。

而 Vue3 已经发布很久了，了解过的同学都知道组合式 API 能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

那么我们能不能像写 Vue3 一样开发小程序呢？

介绍

今天给大家介绍的是 小程序框架 Rubic

Rubic 是一个轻量级的小程序运行时框架，它继承 Vue3 的设计思路，并提供了与 Vue 一致的编程模型。它专注于 javascript 逻辑部分，为小程序提供更好的逻辑复用以及更灵活的代码组织能力。

特性：

• 响应性：基于 @vue/reactivity 的响应式能力。
• 组合式：与 vue3 一致的 Composition API 来描述组件逻辑。
• 类型化：灵活的 API 和完整的 TypeScript 类型。
• 轻量级：仅 30KB 的体积，无编译依赖，现有小程序可轻松接入。

Rubic是运行时框架，不依赖编译过程，可以很方便的接入现有小程序

下面是一个最基本的组件示例：

import { definePage, ref, computed, onLoad } from 'rubic'

definePage({
  setup(query, ctx) {
    const count = ref(0)
    const double = computed(() => count.value * 2)

    const increment = () => {
      count.value++
    }
    
    onLoad(()=>{
        console.log('onLoad')
    })
    
    return {
      count,
      double,
      increment,
    }
  },
})

<view bindtap="increment">{{count}} x2:{{double}}</view>

链接

源码：https://github.com/JasKang/rubic

文档：https://rubic.jaskang.vip