vue-mini / vue-mini

基于 Vue 3 的小程序框架。简单，强大，高性能。

Vue Mini

Vue Mini 是一个基于 Vue 3 的小程序框架，它简单，强大，高性能。 你可以使用 Vue 3 的响应式数据 + 组合式 API 开发小程序，从此开发小程序也将是一种享受。

赞助

Vue Mini 从诞生之初到现在一直是我的个人项目，背后没有任何公司支持。你的资金支持将有助于 Vue Mini 更加长远健康的发展。如何赞助？

文档（编写中）

https://vuemini.org

许可证

MIT

Copyright (c) 2019-present Yang Mingshan

vue-mini's Issues

请问可以用在生成环境吗？

如题

支持像vant-webapp，vueuse这些库吗

支持像vant-webapp，vueuse这些库吗

支持 Vue SFC

以后会不会支持.vue单文件呢

父组件如何触发子组件方法

小程序的selectComponent 不能用。

setData 回调 中做操作要怎么弄呢

目前响应式API应该没有管setData，一个响应的变量被更改并更新到界面上之后，再去做一些事情要怎么实现呢

关于page onload

对于page，onload对应setup，问题一是如何异步，问题二是异步的话，会先执行完onload再执行onshow吗

setup中如何使用setData更新data中数据

小程序中有些特殊组件 比如map中的markers,polyline 等属性
是无法使用setup返回的proxy对象绑定的 只能定义在data中
但是setup中方法无法使用setData方法 操作data中数据

希望setup里的context可以暴露出setData方法
或者context暴露出页面/组件中的方法
(这样可能会破坏封闭性 也许可以使用ts限制setData中的key?)

如何在 setup 中调用原生的 methods 方法？

似乎只有通过 props 调用 properties，但是没有调用 methods 的方法？

如何引入vuex

inject不能在组件外使用。
当然用reactive写个替代版vuex，也不是不行，想看看作者的方案

可以在文档中的 “比较” 章节提及一下与 didi/mpx 的区别吗？

didi/mpx
据我理解，两种都属于增强型而非强运行时依赖型框架，但 vue-mini 的特点在于借鉴 Vue 3 以及 composition api 的设计？

文档怎么打不开了？墙了？

可以单独构建一个组件成为原生小程序组件与原生开发兼容吗？

数据更新的时机

以如下代码为例，开发者工具会报错，网络层错误undefined/xx.png

  state: {
     imgHost: 'xxx.com',
  }
  <image src="{{ imgHost + 'xx.png' }} />

优化 setData 调用频次

vue-mini/packages/wechat/src/component.ts

Line 177 in 2afe339

deepWatch.call(this, key, value)

https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_4-setData%E8%B0%83%E7%94%A8%E9%A2%91%E7%8E%87

很遗憾，只支持wechat，有跨平台的计划吗？

computed需要放入reactive吗

看了下文档，是这么写的

const state = reactive({
      count: 0,
      double: computed(() => state.count * 2),
})

不放入一样响应吧

有针对setData做性能优化的地方吗

执行setData 应该都在 deepWatch 函数内

export function deepWatch(
  this: Pick<
    WechatMiniprogram.Component.InstanceMethods<Record<string, unknown>>,
    'setData'
  >,
  key: string,
  value: unknown
): void {
  if (!isObject(value)) {
    return
  }

  watch(
    isRef(value) ? value : () => value,
    () => {
      this.setData({ [key]: deepToRaw(value) })
    },
    {
      deep: true,
    }
  )
}

似乎没有看到针对setData 的特殊优化，小程序也提供了 $spliceData的api

全局inject

虽然文档和console都提示说inject限于component.
但是从测试来看，从app. js provide是可以inject到page的，所以这个描述应该可以放开吧

考虑升级下依赖

vue 3.2发布了。。。

关于简易双向绑定失效的情况

    {{count}}
    <input model:value="{{count}}" />

import { definePage, ref, watch } from "@vue-mini/wechat";

definePage(() => {
  const count = ref(0);
  watch(count, (val) => {
    console.log("count change");
  });
  return {
    count,
  };
});

模板内的count会随着input内的值改变，但是js中的count的值并没有改变

微信版本库2.16.1
vue-mini 0.21

文档的“比较”章节描述不对，uni-app是支持vue 3.x版本的

文档信息过期，uni-app编译器全面转为vite，运行时全平台支持vue 3.x

请教下properties的使用

请教下，在自定义组件中，properties怎么在setup里交互：

1. properties能否修改
2. properties能否watch

页面支持vue语法

支持转译vue文件就更好了，wxml不习惯

在小程序中输入框双向绑定值不会改变

<input model:value="{{name}}"
<view bindtap="post" 输出view>

defineComponent({
const name = ref('')
const post = () => {
console.log(name.value) //输出空
}
})

怎么在项目中使用ui框架?

如题

只支持基础库 v2.9.0 以上，太高了点呀。。

reactive 不能添加属性吗？

还有一种情况，比如我一个数据开始可能为null, 然后一系列操作以后，返回一个对象

Question: definePage 中并没有在 this.data 赋值相关的属性，怎么做到能在 wxml 正确渲染的呢？

有没有使用的示例哇

咨询下此项目目前有长期维护的发展计划吗

如题，害怕如同kpi突然夭折了，想咨询下是否长期维护，很好看vue-mini的设计**。
题外话：sao的脚手架初始化项目的tab图片阁下是从哪儿get的，感觉很细腻，想取下经