refactor(directive): v-memo

pages.json

@@ -214,6 +214,18 @@
         "navigationBarTitleText": "v-once 组合式 API"
       }
     },
+    {
+      "path": "pages/directive/v-memo/v-memo-options",
+      "style": {
+        "navigationBarTitleText": "v-memo 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-memo/v-memo-composition",
+      "style": {
+        "navigationBarTitleText": "v-memo 组合式 API"
+      }
+    },
     // #endif
 
 
@@ -279,12 +291,6 @@
         "navigationBarTitleText": "v-model"
       }
     },
-    {
-      "path": "pages/directive/v-memo/v-memo",
-      "style": {
-        "navigationBarTitleText": "v-memo"
-      }
-    },
     {
       "path": "pages/directive/v-slot/v-slot",
       "style": {

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

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

pages/directive/v-memo/v-memo-options.uvue

+<template>
+  <view class="page">
+    <view class="flex flex-row justify-between mb-10" v-memo="[]">
+      <text>msg will never change:</text>
+      <text id="v-memo-never-change-msg">{{ msg }}</text>
+    </view>
+    <view class="flex flex-row justify-between mb-10">
+      <text>msg:</text>
+      <text id="msg">{{ msg }}</text>
+    </view>
+    <view class="flex flex-row justify-between mb-10" v-memo="[num]">
+      <text>msg will change when num chang:</text>
+      <text id="v-memo-num-change-msg">{{ msg }}</text>
+    </view>
+    <view class="flex flex-row justify-between mb-10">
+      <text>num:</text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <button
+      id="change-message-btn"
+      class="mb-10"
+      type="primary"
+      @click="changeMessage">
+      change message
+    </button>
+    <button
+      id="increment-num-btn"
+      class="mb-10"
+      type="primary"
+      @click="incrementNum">
+      increment num
+    </button>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      msg: 'hello world',
+      num: 0
+    }
+  },
+  methods: {
+    changeMessage() {
+      this.msg = 'msg changed'
+    },
+    incrementNum(){
+      this.num++
+    }
+  }
+}
+</script>

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

-const PAGE_PATH = '/pages/directive/v-memo/v-memo'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-memo/v-memo-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-memo/v-memo-composition'
 
 describe('v-memo', () => {
   if (process.env.uniTestPlatformInfo.startsWith('web')) {
@@ -9,44 +10,39 @@ describe('v-memo', () => {
     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 equivalentVOnceTextEl = await page.$('.equivalent-v-once-text')
-    let equivalentVOnceTextText = await equivalentVOnceTextEl.text()
-    expect(equivalentVOnceTextText).toBe(
-      'This will never change: hello world'
-    )
+    
+    const neverChangeMsg = await page.$('#v-memo-never-change-msg')
+    expect(await neverChangeMsg.text()).toBe('hello world')
 
-    const vMemoTextEl = await page.$('.v-memo-text')
-    let vMemoTextText = await vMemoTextEl.text()
-    expect(vMemoTextText).toBe(
-      'This will change when num change, msg: hello world, num: 0'
-    )
+    const msg = await page.$('#msg')
+    expect(await msg.text()).toBe('hello world')
+    
+    const numChangeMsg = await page.$('#v-memo-num-change-msg')
+    expect(await numChangeMsg.text()).toBe('hello world')
 
-    const changeMessageBtn = await page.$('.change-message-btn')
+    const changeMessageBtn = await page.$('#change-message-btn')
     await changeMessageBtn.tap()
 
-    const msg = await page.data('msg')
-    expect(msg).toBe('msg changed')
+    expect(await neverChangeMsg.text()).toBe('hello world')
+    expect(await msg.text()).toBe('msg changed')
+    expect(await numChangeMsg.text()).toBe('hello world')
 
-    equivalentVOnceTextText = await equivalentVOnceTextEl.text()
-    expect(equivalentVOnceTextText).toBe(
-      'This will never change: hello world'
-    )
-    vMemoTextText = await vMemoTextEl.text()
-    expect(vMemoTextText).toBe(
-      'This will change when num change, msg: hello world, num: 0'
-    )
+    const incrementNumBtn = await page.$('#increment-num-btn')
+    await incrementNumBtn.tap()
 
-    const plusNumBtn = await page.$('.plus-num-btn')
-    await plusNumBtn.tap()
-
-    vMemoTextText = await vMemoTextEl.text()
-    expect(vMemoTextText).toBe(
-      'This will change when num change, msg: msg changed, num: 1'
-    )
-  })
+    expect(await neverChangeMsg.text()).toBe('hello world')
+    expect(await msg.text()).toBe('msg changed')
+    expect(await numChangeMsg.text()).toBe('msg changed')
+  }
+  
+  it('v-memo options API', async () => {
+		await test(OPTIONS_PAGE_PATH)
+	})
+	
+	it('v-memo composition API', async () => {
+		await test(COMPOSITION_PAGE_PATH)
+	})
 })

pages/directive/v-memo/v-memo.uvue

-<template>
-  <view class="page">
-    <view class="split-title">v-memo</view>
-    <text class="uni-common-mt equivalent-v-once-text" v-memo="[]"
-      >This will never change: {{ msg }}</text
-    >
-    <text class="uni-common-mt v-memo-text" v-memo="[num]"
-      >This will change when num change, msg: {{ msg }}, num: {{ num }}</text
-    >
-    <text class="uni-common-mt">msg: {{ msg }}</text>
-    <text class="uni-common-mt">num: {{ num }}</text>
-    <button class="uni-common-mt change-message-btn" type="primary" @click="changeMessage">
-      change message
-    </button>
-    <button class="uni-common-mt plus-num-btn" type="primary" @click="plusNum">
-      plus num
-    </button>
-  </view>
-</template>
-
-<script lang="uts">
-export default {
-  data() {
-    return {
-      msg: 'hello world',
-      num: 0
-    }
-  },
-  methods: {
-    changeMessage() {
-      this.msg = 'msg changed'
-    },
-    plusNum(){
-      this.num++
-    }
-  }
-}
-</script>

pages/index/index.uvue

@@ -553,18 +553,22 @@ export default {
                   name: 'toRef',
                   url: 'to-ref/to-ref'
                 },
-                // #ifdef APP
                 {
                   id: 'to-refs',
                   name: 'toRefs',
-                  url: 'to-refs/to-refs'
+                  url: 'to-refs/to-refs',
+                // #ifdef WEB
+                  enable: false
+                // #endif
                 },
                 {
                   id: 'to-value',
                   name: 'toValue',
-                  url: 'to-value/to-value'
-                },
+                  url: 'to-value/to-value',
+                // #ifdef WEB
+                  enable: false
                 // #endif
+                },
                 {
                   id: 'un-ref',
                   name: 'unRef',
@@ -720,7 +724,6 @@ export default {
               name: 'v-pre',
               url: 'v-pre/v-pre'
             },
-            // #ifdef APP
             {
               id: 'v-once',
               name: 'v-once',
@@ -728,16 +731,43 @@ export default {
                 {
                   id: 'v-once-options',
                   name: 'v-once 选项式 API',
-                  url: 'v-once-options'
+                  url: 'v-once-options',
+                  // #ifdef WEB
+                  enable: false
+                  // #endif
                 },
                 {
                   id: 'v-once-composition',
                   name: 'v-once 组合式 API',
-                  url: 'v-once-composition'
+                  url: 'v-once-composition',
+                  // #ifdef WEB
+                  enable: false
+                  // #endif
+                },
+              ]
+            },
+            {
+              id: 'v-memo',
+              name: 'v-memo',
+              children: [
+                {
+                  id: 'v-memo-options',
+                  name: 'v-memo 选项式 API',
+                  url: 'v-memo-options',
+                  // #ifdef WEB
+                  enable: false
+                  // #endif
+                },
+                {
+                  id: 'v-memo-composition',
+                  name: 'v-memo 组合式 API',
+                  url: 'v-memo-composition',
+                  // #ifdef WEB
+                  enable: false
+                  // #endif
                 },
               ]
             },
-            // #endif
           ]
         },
         {

refactor_options-API-composition-API-correspondence.md

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