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

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

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