feat(composition api): readonly

pages/composition-api/reactivity/readonly/readonly.test.js

+const PAGE_PATH = '/pages/composition-api/reactivity/readonly/readonly'
+
+describe('ref', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('basic', async () => {
+      const dataStr = await page.$('#data-str')
+      expect(await dataStr.text()).toBe('data.str: default str')
+      const dataNum = await page.$('#data-num')
+      expect(await dataNum.text()).toBe('data.num: 0')
+      const dataArr = await page.$('#data-arr')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c"]')
+
+      const readonlyDataStr = await page.$('#readonly-data-str')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: default str')
+      const readonlyDataNum = await page.$('#readonly-data-num')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 0')
+      const readonlyDataArr = await page.$('#readonly-data-arr')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c"]')
+
+      const updateDataBtn = await page.$('#update-data-btn')
+      await updateDataBtn.tap()
+
+      expect(await dataStr.text()).toBe('data.str: new str')
+      expect(await dataNum.text()).toBe('data.num: 1')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+
+      const updateReadonlyDataBtn = await page.$('#update-readonly-data-btn')
+      await updateReadonlyDataBtn.tap()
+
+      expect(await dataStr.text()).toBe('data.str: new str')
+      expect(await dataNum.text()).toBe('data.num: 1')
+      expect(await dataArr.text()).toBe('data.arr: ["a","b","c","d"]')
+      expect(await readonlyDataStr.text()).toBe('readonly data.str: new str')
+      expect(await readonlyDataNum.text()).toBe('readonly data.num: 1')
+      expect(await readonlyDataArr.text()).toBe('readonly data.arr: ["a","b","c","d"]')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file

pages/composition-api/reactivity/readonly/readonly.uvue

- <template><view class="page">readonly</view></template>
\ No newline at end of file
+<template>
+  <view class="page">
+    <text id="data-str" class="uni-common-mb">data.str: {{ data.str }}</text>
+    <text id="data-num" class="uni-common-mb">data.num: {{ data.num }}</text>
+    <text id="data-arr" class="uni-common-mb">data.arr: {{ data.arr}}</text>
+
+    <text id="readonly-data-str" class="uni-common-mb">readonly data.str: {{ readonlyData.str }}</text>
+    <text id="readonly-data-num" class="uni-common-mb">readonly data.num: {{ readonlyData.num }}</text>
+    <text id="readonly-data-arr" class="uni-common-mb">readonly data.arr: {{ readonlyData.arr}}</text>
+
+    <button id="update-data-btn" class="uni-common-mb" @click="updateData">update data</button>
+    <button id="update-readonly-data-btn" @click="updateReadonlyData">update readonly data</button>
+  </view>
+</template>
+
+<script setup>
+  type Data = {
+    str : string,
+    num : number,
+    arr : string[]
+  }
+
+  const data = reactive({
+    str: 'default str',
+    num: 0,
+    arr: ['a', 'b', 'c']
+  } as Data)
+
+  const readonlyData = readonly(data)
+
+  const updateData = () => {
+    data.str = 'new str'
+    data.num++
+    data.arr.push('d')
+  }
+
+  const updateReadonlyData = () => {
+    readonlyData.str = 'new readonly str'
+    readonlyData.num++
+    readonlyData.arr.push('e')
+  }
+</script>
\ No newline at end of file

pages/tab-bar/composition-api.uvue

@@ -96,12 +96,12 @@
           {
             name: 'reactive',
             url: 'reactive',
-            enable: false,
+            enable: true,
           },
           {
             name: 'readonly',
             url: 'readonly',
-            enable: false,
+            enable: true,
           },
           {
             name: 'watch',