From 5a19f5133da67ebe87893a23d9c501e69a167b8a Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Tue, 23 Apr 2024 19:16:51 +0800
Subject: [PATCH] refactor(directive): v-once

---
 pages.json                                    | 22 +++++++-----
 .../directive/v-once/v-once-composition.uvue  | 22 ++++++++++++
 pages/directive/v-once/v-once-options.uvue    | 30 ++++++++++++++++
 pages/directive/v-once/v-once.test.js         | 36 +++++++++++--------
 pages/directive/v-once/v-once.uvue            | 23 ------------
 pages/index/index.uvue                        | 20 ++++++++++-
 ...ions-API-composition-API-correspondence.md |  6 ++--
 7 files changed, 110 insertions(+), 49 deletions(-)
 create mode 100644 pages/directive/v-once/v-once-composition.uvue
 create mode 100644 pages/directive/v-once/v-once-options.uvue
 delete mode 100644 pages/directive/v-once/v-once.uvue

diff --git a/pages.json b/pages.json
index d81862a..128c081 100644
--- a/pages.json
+++ b/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": {
diff --git a/pages/directive/v-once/v-once-composition.uvue b/pages/directive/v-once/v-once-composition.uvue
new file mode 100644
index 0000000..5354f61
--- /dev/null
+++ b/pages/directive/v-once/v-once-composition.uvue
@@ -0,0 +1,22 @@
+<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>
diff --git a/pages/directive/v-once/v-once-options.uvue b/pages/directive/v-once/v-once-options.uvue
new file mode 100644
index 0000000..116238b
--- /dev/null
+++ b/pages/directive/v-once/v-once-options.uvue
@@ -0,0 +1,30 @@
+<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 lang="uts">
+export default {
+  data() {
+    return {
+      msg: 'hello world'
+    }
+  },
+  methods: {
+    changeMessage() {
+      this.msg = 'msg changed'
+    }
+  }
+}
+</script>
diff --git a/pages/directive/v-once/v-once.test.js b/pages/directive/v-once/v-once.test.js
index eeb2856..cc4046e 100644
--- a/pages/directive/v-once/v-once.test.js
+++ b/pages/directive/v-once/v-once.test.js
@@ -1,4 +1,5 @@
-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
diff --git a/pages/directive/v-once/v-once.uvue b/pages/directive/v-once/v-once.uvue
deleted file mode 100644
index e74da34..0000000
--- a/pages/directive/v-once/v-once.uvue
+++ /dev/null
@@ -1,23 +0,0 @@
-<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>
-</template>
-
-<script lang="uts">
-export default {
-  data() {
-    return {
-      msg: 'hello world'
-    }
-  },
-  methods: {
-    changeMessage() {
-      this.msg = 'msg changed'
-    }
-  }
-}
-</script>
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index 8438288..2ce8244 100644
--- a/pages/index/index.uvue
+++ b/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
           ]
         },
         {
diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md
index 968b72e..2069d65 100644
--- a/refactor_options-API-composition-API-correspondence.md
+++ b/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
 
-- 
GitLab