refactor(directive): v-once

pages.json

@@ -201,6 +201,20 @@
         "navigationBarTitleText": "v-pre"
       }
     },
+    // #ifdef APP
+    {
+      "path": "pages/directive/v-once/v-once-options",
+      "style": {
+        "navigationBarTitleText": "v-once 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-once/v-once-composition",
+      "style": {
+        "navigationBarTitleText": "v-once 组合式 API"
+      }
+    },
+    // #endif
 
 
     {
@@ -265,14 +279,6 @@
         "navigationBarTitleText": "v-model"
       }
     },
-    // #ifdef APP
-    {
-      "path": "pages/directive/v-once/v-once",
-      "style": {
-        "navigationBarTitleText": "v-once"
-      }
-    },
-    // #endif
     {
       "path": "pages/directive/v-memo/v-memo",
       "style": {

pages/directive/v-once/v-once-composition.uvue

+<template>
+  <view class="page">
+    <view class="flex flex-row justify-between mb-10" v-once>
+      <text>This msg will never change:</text>
+      <text id='v-once-msg'>{{ msg }}</text>
+    </view>
+    <view class="flex flex-row justify-between mb-10">
+      <text>msg:</text>
+      <text id="msg">{{ msg }}</text>
+    </view>
+    <button id="btn" class="mb-10" type="primary" @click="changeMessage">
+      change message
+    </button>
+  </view>
+</template>
+
+<script setup lang="uts">
+  const msg = ref('hello world')
+  const changeMessage = () => {
+    msg.value = 'msg changed'
+  }
+</script>

pages/directive/v-once/v-once.uvue → pages/directive/v-once/v-once-options.uvue

 <template>
   <view class="page">
-    <view class="split-title">v-once</view>
-    <text class="uni-common-mt v-once-text" v-once>This will never change: {{ msg }}</text>
-    <text class="uni-common-mt">msg: {{msg}}</text>
-    <button class="uni-common-mt btn" type="primary" @click="changeMessage">change message</button>
+    <view class="flex flex-row justify-between mb-10" v-once>
+      <text>This msg will never change:</text>
+      <text id='v-once-msg'>{{ msg }}</text>
+    </view>
+    <view class="flex flex-row justify-between mb-10">
+      <text>msg:</text>
+      <text id="msg">{{ msg }}</text>
+    </view>
+    <button id="btn" class="mb-10" type="primary" @click="changeMessage">
+      change message
+    </button>
   </view>
 </template>
 

pages/directive/v-once/v-once.test.js

-const PAGE_PATH = '/pages/directive/v-once/v-once'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-once/v-once-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-once/v-once-composition'
 
 describe('v-once', () => {
   if (process.env.uniTestPlatformInfo.startsWith('web')) {
@@ -9,22 +10,29 @@ describe('v-once', () => {
     return
   }
 	let page
-	beforeAll(async () => {
-		page = await program.reLaunch(PAGE_PATH)
+	
+	const test = async (pagePath) => {
+		page = await program.reLaunch(pagePath)
 		await page.waitFor('view')
-	})
-	it('basic', async () => {
-		const vOnceTextEl = await page.$('.v-once-text')
-		let vOnceTextText = await vOnceTextEl.text()
-		expect(vOnceTextText).toBe('This will never change: hello world')
+		
+		const vOnceMsg = await page.$('#v-once-msg')
+		expect(await vOnceMsg.text()).toBe('hello world')
+		
+		const msg = await page.$('#msg')
+		expect(await msg.text()).toBe('hello world')
 
-		const btn = await page.$('.btn')
+		const btn = await page.$('#btn')
 		await btn.tap()
 
-		const msg = await page.data('msg')
-		expect(msg).toBe('msg changed')
-
-		vOnceTextText = await vOnceTextEl.text()
-		expect(vOnceTextText).toBe('This will never change: hello world')
+		expect(await vOnceMsg.text()).toBe('hello world')
+		expect(await msg.text()).toBe('msg changed')
+	}
+	
+	it('v-once options API', async () => {
+		await test(OPTIONS_PAGE_PATH)
+	})
+	
+	it('v-once composition API', async () => {
+		await test(COMPOSITION_PAGE_PATH)
 	})
 })
\ No newline at end of file

pages/index/index.uvue

@@ -719,7 +719,25 @@ export default {
               id: 'v-pre',
               name: 'v-pre',
               url: 'v-pre/v-pre'
-            }
+            },
+            // #ifdef APP
+            {
+              id: 'v-once',
+              name: 'v-once',
+              children: [
+                {
+                  id: 'v-once-options',
+                  name: 'v-once 选项式 API',
+                  url: 'v-once-options'
+                },
+                {
+                  id: 'v-once-composition',
+                  name: 'v-once 组合式 API',
+                  url: 'v-once-composition'
+                },
+              ]
+            },
+            // #endif
           ]
         },
         {

refactor_options-API-composition-API-correspondence.md

@@ -161,11 +161,11 @@ function transform(fileInfo, api) {
 - [ ] v-bind
 - [ ] v-model
 - [ ] v-slot
-- [ ] v-pre
-- [ ] v-once
+- [x] v-pre
+- [x] v-once
 - [ ] v-memo
 - [ ] v-text
-- [ ] -cloak
+- [ ] v-cloak 暂不支持
 
 ## lifecycle