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

refactor(reactivity): 优化 ref 示例及测试

上级 9c09df24
......@@ -7,19 +7,25 @@ describe('ref', () => {
await page.waitFor('view')
})
it('basic', async () => {
const count1 = await page.$('#count1')
expect(await count1.text()).toBe('count1: 0')
const count2 = await page.$('#count2')
expect(await count2.text()).toBe('count2: 0')
const count = await page.$('#count')
expect(await count.text()).toBe('0')
const str = await page.$('#str')
expect(await str.text()).toBe('default str')
const bool = await page.$('#bool')
expect(await bool.text()).toBe('false')
const arr = await page.$('#arr')
expect(await arr.text()).toBe('[1,2,3]')
const counterCount = await page.$('#counter-count')
expect(await counterCount.text()).toBe('counter.count: 0')
expect(await counterCount.text()).toBe('0')
const incrementBtn = await page.$('#increment-btn')
await incrementBtn.tap()
const changeDataBtn = await page.$('#change-data-btn')
await changeDataBtn.tap()
expect(await count1.text()).toBe('count1: 2')
expect(await count2.text()).toBe('count2: 2')
expect(await counterCount.text()).toBe('counter.count: 1')
expect(await count.text()).toBe('1')
expect(await str.text()).toBe('new str')
expect(await bool.text()).toBe('true')
expect(await arr.text()).toBe('[1,2,3,4]')
expect(await counterCount.text()).toBe('1')
})
})
\ No newline at end of file
<template>
<view class="page">
<text id="count1" class="mb-10">count1: {{ count1 }}</text>
<text id="count2" class="mb-10">count2: {{ count2 }}</text>
<text id="counter-count" class="mb-10">counter.count: {{ counter.count }}</text>
<button id="increment-btn" @click="increment">increment</button>
<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>str:</text>
<text id="str">{{ str }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>bool:</text>
<text id="bool">{{ bool }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>arr:</text>
<text id="arr">{{ JSON.stringify(arr) }}</text>
</view>
<view class="flex justify-between flex-row mb-10">
<text>counter.count:</text>
<text id="counter-count">{{ counter.count }}</text>
</view>
<button id="change-data-btn" @click="changeData">change data</button>
</view>
</template>
<script setup lang='uts'>
// 基础数据类型可自动推导类型
const count1 = ref(0)
const count2 = ref(count1)
<script setup lang="uts">
// 基础数据类型可自动推导类型
const count = ref(0)
const str = ref('default str')
const bool = ref(false)
type Counter = {
count : number
}
// 可通过泛型指定类型
const counter = ref<Counter>({
count: 0
})
// 可通过泛型指定类型
const arr = ref<number[]>([1, 2, 3])
type Counter = {
count : number
}
// 可通过泛型指定类型
const counter = ref<Counter>({
count: 0
})
const increment = () => {
count1.value++
count2.value++
counter.value.count++
}
</script>
\ No newline at end of file
const changeData = () => {
count.value++
str.value = 'new str'
bool.value = !bool.value
arr.value.push(arr.value.length + 1)
counter.value.count++
}
</script>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册