refactor: $data

pages.json

@@ -48,6 +48,19 @@
         "navigationBarTitleText": "useAttrs"
       }
     },
+    {
+      "path": "pages/component-instance/data/data-options",
+      "style": {
+        "navigationBarTitleText": "$data"
+      }
+    },
+    {
+      "path": "pages/component-instance/data/data-composition",
+      "style": {
+        "navigationBarTitleText": "data 组合式 API"
+      }
+    },
+
     {
       "path": "pages/built-in-component/keep-alive/keep-alive",
       "style": {
@@ -209,12 +222,6 @@
         "navigationBarTitleText": "component-lifecycle"
       }
     },
-    {
-      "path": "pages/component-instance/data/data",
-      "style": {
-        "navigationBarTitleText": "$data"
-      }
-    },
     {
       "path": "pages/component-instance/props/props",
       "style": {

pages/component-instance/data/data-composition.uvue

+<template>
+  <view class="page">
+    <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>num: </text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>arr: </text>
+      <text id="arr">{{ arr.join(',') }}</text>
+    </view>
+    <button type="primary" @click="updateData">update data</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+const str = ref('default str')
+const num = ref(0)
+const arr = ref([1, 2, 3])
+
+const updateData = () => {
+  str.value = 'new str'
+  num.value = 1
+  arr.value = [4, 5, 6]
+}
+
+defineExpose({
+  updateData
+})
+</script>

pages/component-instance/data/data-options.uvue

+<template>
+  <view class="page">
+    <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>num: </text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>arr: </text>
+      <text id="arr">{{ arr.join(',') }}</text>
+    </view>
+    <button type="primary" @click="updateData">update data</button>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      str: 'default str',
+      num: 0,
+      arr: [1, 2, 3],
+    }
+  },
+  methods: {
+    updateData() {
+      this.str = 'new str'
+      this.num = 1
+      this.arr = [4, 5, 6]
+    },
+  },
+}
+</script>

pages/component-instance/data/data.test.js

-const PAGE_PATH = '/pages/component-instance/data/data'
+const OPTIONS_PAGE_PATH = '/pages/component-instance/data/data-options'
+const COMPOSITION_PAGE_PATH = '/pages/component-instance/data/data-composition'
 
 describe('$data', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-
-  it('should data.val === 2', async () => {
-    const plusButton = await page.$('.plus')
-    await plusButton.tap()
+  const test = async (page) => {
+    const str = await page.$('#str')
+    expect(await str.text()).toBe('default str')
+    
+    const num = await page.$('#num')
+    expect(await num.text()).toBe('0')
+    
+    const arr = await page.$('#arr')
+    expect(await arr.text()).toBe('1,2,3')
+    
+    await page.callMethod('updateData')
+    
+    expect(await str.text()).toBe('new str')
+    expect(await num.text()).toBe('1')
+    expect(await arr.text()).toBe('4,5,6')
+  }
 
-    const val = await page.$('.val')
-    expect(await val.text()).toBe('2')
+  it('$data 选项式 API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await test(page)
   });
 
-  it('should data.val === 1', async () => {
-    const minusButton = await page.$('.minus')
-    await minusButton.tap()
-
-    const val = await page.$('.val')
-    expect(await val.text()).toBe('1')
+  it('data 组合式 API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await test(page)
   })
 })

pages/component-instance/data/data.uvue

-<template>
-  <view class="page">
-    <view class="row">初始值1: <text>1</text></view>
-    <view class="row">data.val: <text class="val">{{val}}</text></view>
-    <view class="row">data._val: <text class="_val">{{_val}}</text></view>
-    <view class="row">data.$val: <text class="$val">{{$val}}</text></view>
-    <view class="buttons">
-      <button class="btn plus" @click="click(1)">增加</button>
-      <button class="btn minus" @click="click(-1)">减少</button>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      val: 1,
-      _val: 1,
-      $val: 1
-    }
-  },
-  methods: {
-    click (num: number) {
-      this.val += num
-      this._val += num
-      this.$val += num
-    }
-  }
-}
-</script>
-
-<style>
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    margin-top: 10px;
-  }
-  .btn {
-    flex: 1;
-    margin: 0 5px;
-  }
-</style>

pages/index/index.uvue

@@ -123,7 +123,7 @@ export default {
               children: [
                 {
                   id: 'attrs-options',
-                  name: 'attrs  选项式 API',
+                  name: 'attrs 选项式 API',
                   url: 'attrs-options',
                 },
                 {
@@ -132,6 +132,21 @@ export default {
                   url: 'attrs-composition',
                 }
               ]
+            },{
+              id: 'data',
+              name: 'data',
+              children: [
+                {
+                  id: 'data-options',
+                  name: 'data 选项式 API',
+                  url: 'data-options',
+                },
+                {
+                  id: 'data-composition',
+                  name: 'data 组合式 API',
+                  url: 'data-composition',
+                }
+              ]
             },
           ] as Page[],
         }

refactor:options-API-composition-API-correspondence.md

@@ -21,8 +21,8 @@ script 中不要有空的 data, onLoad, methods\
 - [x] app.use               app.use
 
 ## component instance
-- [ ] attrs useAttrs
-- [ ] data
+- [x] attrs useAttrs
+- [x] data
 - [ ] props defineProps
 - [ ] el
 - [ ] options defineOptions