背景
我们都知道小程序与 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>
状态管理
同样对于状态管理方面我们尽量保持 Vue3 的开发习惯，Rubic 复刻了 pinia API 将它移植到小程序端。
import { defineStore } from 'rubic'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useCounterStore = defineStore('main', {
// other options...
})
import { definePage, defineStore } from 'rubic'
import { useCounterStore } from './stores/counter'
definePage({
setup() {
const store = useCounterStore()
return {
// 您可以返回整个 store 实例以在模板中使用它
store,
}
},
})
