Skip to content

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() 注册和调度。

ts
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() 定义;页面与组件共享注册模型,但宿主只会调用当前实例支持的字段。

示例:本组示例

选择 setupcreatedattached 阶段执行,默认值为 attached

本组示例

宿主选项直接对应 Component() 字段,不要按 Vue Web 选项解释。

ts
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'],
})

Released under the MIT License.