API
observer
描述
在 Vue 中，将组件渲染方法变成 Reaction，每次视图重新渲染就会收集依赖，依赖更新会自动重渲染。
签名
ts
interface IObserverOptions {
scheduler?: (updater: () => void) => void // 调度器，可以手动控制更新时机
name?: string // 包装后的组件的name
}
interface observer<T extends VueComponent> {
(component: T, options?: IObserverOptions): T
}用例
<script>
import { observable } from '@formily/reactive'
import { observer } from '@silver-formily/reactive-vue'
export default observer({
data() {
// 能与 vue 的响应系统共存
const obs = observable({
value: 'Hello world',
})
return {
obs,
}
},
})
</script>
<template>
<div>
<div>
<input
:style="{
height: 28,
padding: '0 8px',
border: '2px solid #888',
borderRadius: 3,
}"
:value="obs.value"
@input="(e) => {
obs.value = e.target.value
}"
>
</div>
<div>{{ obs.value }}</div>
</div>
</template>useObserver 推荐
observer的内部实现，目前更推荐使用这种方式，可以减少不必要的组件包裹。
签名
ts
// 与observer一致
interface IObserverOptions {
scheduler?: (updater: () => void) => void
name?: string // 包装后的组件的name
}
interface useObserver {
(options?: IObserverOptions): viod
}用例
<script setup lang="ts">
import { observable } from '@formily/reactive'
import { useObserver } from '@silver-formily/reactive-vue'
useObserver()
const obs = observable({
value: 'Hello world',
})
function handleInput(event: Event) {
const target = event.target as HTMLInputElement | null
if (target) {
obs.value = target.value
}
}
</script>
<template>
<div>
<div>
<input
:style="{
height: 28,
padding: '0 8px',
border: '2px solid #888',
borderRadius: 3,
}"
:value="obs.value"
@input="handleInput"
>
</div>
<div>{{ obs.value }}</div>
</div>
</template>formilyComputed New
将一个 @formily/reactive的响应式转为 Vue3 的响应式（ComputedRef）。在Vue3中可以完全替代 observable.computed
签名
ts
import type { IReactionOptions } from '@formily/reactive'
import type { ComputedRef } from 'vue'
// options 默认值为 { fireImmediately: true }
interface formilyComputed {
(tracker: () => T, options?: IReactionOptions): ComputedRef<T>
}用例
<script setup lang="ts">
import { observable } from '@formily/reactive'
import { formilyComputed } from '@silver-formily/reactive-vue'
const obs = observable({
value: 'Hello formilyComputed',
})
const uppercaseValue = formilyComputed(() => obs.value.toUpperCase())
const charCount = formilyComputed(() => obs.value.length)
function handleInput(event: Event) {
const target = event.target as HTMLInputElement | null
if (target) {
obs.value = target.value
}
}
</script>
<template>
<div>
<div>
<input
:style="{
height: 28,
padding: '0 8px',
border: '2px solid #888',
borderRadius: 3,
}"
:value="obs.value"
@input="handleInput"
>
</div>
<div>原始：{{ obs.value }}</div>
<div>formilyComputed（大写）：{{ uppercaseValue }}</div>
<div>formilyComputed（长度）：{{ charCount }}</div>
</div>
</template>