Options API
Wevu 接受 Vue 风格选项,同时保留小程序 Component 的宿主选项。名称相同不代表运行时语义完全相同:组件注册、生命周期时机、props 规范化和更新最终都受小程序宿主约束。
Vue 风格选项
props
类型签名: DefineComponentOptions['props']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
支持数组、对象和类型声明,并在注册阶段转换为小程序 properties。
emits
类型签名: DefineComponentOptions['emits']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
用于声明组件事件;实际派发通过小程序组件事件系统完成。
data
类型签名: DefineComponentOptions['data']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
支持对象或返回初始状态的函数,推荐使用函数形式。
setup
类型签名: DefineComponentOptions['setup']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
在 Wevu setup 上下文中执行。默认在组件 attached 阶段运行,与 Vue 组件创建时机存在差异。
computed
类型签名: DefineComponentOptions['computed']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
参与 Wevu 响应式快照和 setData 差量更新,不是 Vue DOM 渲染器的 computed 调度链路。
methods
类型签名: DefineComponentOptions['methods']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
方法会绑定到小程序公开实例,并可供模板事件处理器调用。
watch
类型签名: DefineComponentOptions['watch']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
Vue 差异: 名称沿用 Vue Options API,但 Wevu 最终生成小程序 Component() 配置,没有 DOM、Virtual DOM 或浏览器组件实例;生命周期应使用 Wevu/宿主对应项。
示例: 见 本组示例。
监听 data、props 或 computed 路径;调度和深度监听能力以 Reactivity API 为准。
本组示例
Vue 风格选项最终仍由小程序 Component() 注册和调度。
import { defineComponent } from 'wevu'
export default defineComponent({
props: { initial: { type: Number, default: 0 } },
data() { return { count: this.initial } },
computed: { doubled() { return this.count * 2 } },
methods: { increment() { this.count += 1 } },
watch: { count(value) { console.log('count', value) } },
})小程序宿主选项
properties
类型签名: DefineComponentOptions['properties']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
原生小程序属性声明。新代码优先使用 props,需要宿主级 observer 或原生类型行为时使用本选项。
behaviors
类型签名: DefineComponentOptions['behaviors']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传小程序 behaviors 配置。
lifetimes
类型签名: DefineComponentOptions['lifetimes']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传组件生命周期;对应 Hook 映射见 Lifecycle API。
pageLifetimes
类型签名: DefineComponentOptions['pageLifetimes']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传组件所在页面的生命周期。
externalClasses
类型签名: DefineComponentOptions['externalClasses']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
声明组件可接收的外部样式类。
options
类型签名: DefineComponentOptions['options']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传小程序组件选项,例如 virtualHost。
observers
类型签名: DefineComponentOptions['observers']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传小程序数据字段监听器。
relations
类型签名: DefineComponentOptions['relations']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
透传小程序组件关系定义。
features
类型签名: DefineComponentOptions['features']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
按需开启页面事件桥接,避免为未使用的页面事件生成处理函数。
setData
类型签名: DefineComponentOptions['setData']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
配置快照、diff 和 setData payload 策略。
setupLifecycle
类型签名: DefineComponentOptions['setupLifecycle']
运行时说明: 该选项最终注册到小程序 Component() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。
示例: 见 本组示例。
选择 setup 在 created 或 attached 阶段执行,默认值为 attached。
本组示例
宿主选项直接对应 Component() 字段,不要按 Vue Web 选项解释。
import { defineComponent } from 'wevu'
export default defineComponent({
properties: { status: { type: String, value: 'idle' } },
options: { multipleSlots: true, styleIsolation: 'apply-shared' },
lifetimes: { attached() { console.log('attached') } },
pageLifetimes: { show() { console.log('page show') } },
externalClasses: ['custom-class'],
})