提交 597fed52 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

refactor(reactivity): toRef

上级 6f168768
......@@ -548,6 +548,11 @@ export default {
name: 'isRef',
url: 'is-ref/is-ref'
},
{
id: 'to-ref',
name: 'toRef',
url: 'to-ref/to-ref'
},
]
}
] as Page[]
......
const PAGE_PATH = '/pages/composition-api/reactivity/to-ref/to-ref'
const PAGE_PATH = '/pages/reactivity/utilities/to-ref/to-ref'
describe('toRef', () => {
if (process.env.uniTestPlatformInfo.startsWith('web')) {
......@@ -15,26 +15,26 @@ describe('toRef', () => {
})
it('basic', async () => {
const count = await page.$('#count')
expect(await count.text()).toBe('count: 0')
expect(await count.text()).toBe('0')
const isRefCount = await page.$('#is-ref-count')
expect(await isRefCount.text()).toBe('isRef count: false')
expect(await isRefCount.text()).toBe('false')
const refCount = await page.$('#ref-count')
expect(await refCount.text()).toBe('ref count: 0')
expect(await refCount.text()).toBe('0')
const isRefRefCount = await page.$('#is-ref-ref-count')
expect(await isRefRefCount.text()).toBe('isRef ref count: true')
expect(await isRefRefCount.text()).toBe('true')
const objNum = await page.$('#obj-num')
expect(await objNum.text()).toBe('obj.num: 0')
expect(await objNum.text()).toBe('0')
const toRefObjNum = await page.$('#to-ref-obj-num')
expect(await toRefObjNum.text()).toBe('toRef(obj, "num"): 0')
expect(await toRefObjNum.text()).toBe('0')
const toRefFnObjNum = await page.$('#to-ref-fn-obj-num')
expect(await toRefFnObjNum.text()).toBe('toRef(() => obj.num): 0')
expect(await toRefFnObjNum.text()).toBe('0')
const incrementBtn = await page.$('#increment-btn')
await incrementBtn.tap()
expect(await objNum.text()).toBe('obj.num: 2')
expect(await toRefObjNum.text()).toBe('toRef(obj, "num"): 2')
expect(await toRefFnObjNum.text()).toBe('toRef(() => obj.num): 2')
expect(await objNum.text()).toBe('2')
expect(await toRefObjNum.text()).toBe('2')
expect(await toRefFnObjNum.text()).toBe('2')
})
})
\ No newline at end of file
<template>
<view class="page">
<text id="count">count: {{ count }}</text>
<text class="mt-10" id="is-ref-count">isRef count: {{ isRefCount }}</text>
<text class="mt-10" id="ref-count">ref count: {{ refCount }}</text>
<text class="mt-10" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
<view class="flex justify-between flex-row mb-10">
<text>count:</text>
<text id="count">{{ count }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>isRef count:</text>
<text id="is-ref-count">{{ isRefCount }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>ref count:</text>
<text id="ref-count">{{ refCount }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>isRef ref count:</text>
<text id="is-ref-ref-count">{{ isRefRefCount }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>obj.num:</text>
<text id="obj-num">{{ obj.num }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>toRef(obj, "num"):</text>
<text id="to-ref-obj-num">{{ objNum }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>toRef(() => obj.num):</text>
<text id="to-ref-fn-obj-num">{{ readonlyObjNum }}</text>
</view>
<text class="mt-10" id="obj-num">obj.num: {{ obj.num }}</text>
<text class="mt-10" id="to-ref-obj-num">toRef(obj, "num"): {{ objNum }}</text>
<text class="mt-10" id="to-ref-fn-obj-num">toRef(() => obj.num): {{ readonlyObjNum }}</text>
<button class="mt-10" id="increment-btn" @click="increment">increment obj.num</button>
<button class="mt-10" id="increment-btn" @click="increment">
increment obj.num
</button>
</view>
</template>
<script setup>
const count = 0;
const isRefCount = isRef(count);
const refCount = toRef<number>(count);
const isRefRefCount = isRef(refCount);
<script setup lang="uts">
const count = 0;
const isRefCount = isRef(count);
const refCount = toRef<number>(count);
const isRefRefCount = isRef(refCount);
type Obj = {
num : number
}
const obj = reactive({
num: 0
} as Obj)
type Obj = {
num : number
}
const obj = reactive({
num: 0
} as Obj)
const objNum = toRef<number>(obj, 'num')
const objNum = toRef<number>(obj, 'num')
const readonlyObjNum = toRef<number>(() : number => obj.num)
const readonlyObjNum = toRef<number>(() : number => obj.num)
const increment = () => {
obj.num++;
objNum.value++;
readonlyObjNum.value++;
}
</script>
\ No newline at end of file
const increment = () => {
obj.num++;
objNum.value++;
readonlyObjNum.value++;
}
</script>
......@@ -135,7 +135,7 @@ function transform(fileInfo, api) {
- [x] isReactive
- [x] isReadonly
- [x] isRef
- [ ] toRef
- [x] toRef
- [ ] toRefs
- [ ] toValue
- [ ] unRef
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册
新手
引导
客服 返回
顶部