refactor(component instance): nextTick

pages.json

@@ -365,6 +365,19 @@
         "navigationBarTitleText": "$forceUpdate 组合式 API"
       }
     },
+    {
+      "path": "pages/component-instance/nextTick/nextTick-options",
+      "style": {
+        "navigationBarTitleText": "$nextTick"
+      }
+    },
+    {
+      "path": "pages/component-instance/nextTick/nextTick-composition",
+      "style": {
+        "navigationBarTitleText": "nextTick"
+      }
+    },
+
     {
       "path": "pages/component-instance/nextTick-function/nextTick-function",
       "style": {

pages/component-instance/nextTick/child-composition.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view>
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">title:</text>
+        <text id="child-text">{{ dataInfo.title }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">before $nextTick title:</text>
+        <text>{{ dataInfo.beforeNextTickTitle }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">after $nextTick title:</text>
+        <text>{{ dataInfo.afterNextTickTitle }}</text>
+      </view>
+      <button id="child-test-next-tick-btn" @click="childTestNextTick">child test nextTick</button>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="uts">
+  type DataInfo = {
+    title : string
+    beforeNextTickTitle : string
+    afterNextTickTitle : string
+  }
+
+  const dataInfo = reactive({
+    title: 'default title',
+    beforeNextTickTitle: '',
+    afterNextTickTitle: '',
+  } as DataInfo)
+
+  const testNextTick = async () => {
+    const childText = uni.getElementById('child-text')!
+    dataInfo.title = 'new title'
+
+    // #ifdef APP
+    dataInfo.beforeNextTickTitle = childText.getAttribute('value')!
+    // #endif
+    // #ifndef APP
+    // @ts-ignore
+    dataInfo.beforeNextTickTitle = childText.textContent
+    // #endif
+    
+    await nextTick()
+    
+    // #ifdef APP
+    dataInfo.afterNextTickTitle = childText.getAttribute('value')!
+    // #endif
+    // #ifndef APP
+    // @ts-ignore
+    dataInfo.afterNextTickTitle = childText.textContent
+    // #endif
+  }
+  const childTestNextTick = () => {
+    testNextTick()
+  }
+
+  defineExpose({
+    dataInfo
+  })
+</script>
\ No newline at end of file

pages/component-instance/nextTick/child-options.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for callback:</text>
+        <text id="child-text-callback">{{ dataInfo.titleForCallback }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick callback title:</text>
+        <text>{{ dataInfo.beforeNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick callback title:</text>
+        <text>{{ dataInfo.afterNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for promise:</text>
+        <text id="child-text-promise">{{ dataInfo.titleForPromise }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick promise title:</text>
+        <text>{{ dataInfo.beforeNextTickPromiseTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick promise title:</text>
+        <text>{{ dataInfo.afterNextTickPromiseTitle }}</text>
+      </view>
+      <button id="child-test-next-tick-btn" @click="childTestNextTick">child test $nextTick</button>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  type DataInfo = {
+    titleForCallback : string
+    beforeNextTickCallbackTitle : string
+    afterNextTickCallbackTitle : string
+    titleForPromise : string
+    beforeNextTickPromiseTitle : string
+    afterNextTickPromiseTitle : string
+  }
+
+  export default {
+    data() {
+      return {
+        dataInfo: {
+          titleForCallback: 'default title for callback',
+          beforeNextTickCallbackTitle: '',
+          afterNextTickCallbackTitle: '',
+          titleForPromise: 'default title for promise',
+          beforeNextTickPromiseTitle: '',
+          afterNextTickPromiseTitle: '',
+        } as DataInfo
+      }
+    },
+    methods: {
+      childTestNextTick() {
+        this.nextTickCallback()
+        this.nextTickPromise()
+      },
+      nextTickCallback() {
+        const childText = uni.getElementById('child-text-callback')!
+        this.dataInfo.titleForCallback = 'new title for callback'
+
+        // #ifdef APP
+        this.dataInfo.beforeNextTickCallbackTitle = childText.getAttribute('value')!
+        // #endif
+        // #ifndef APP
+        // @ts-ignore
+        this.dataInfo.beforeNextTickCallbackTitle = childText.textContent
+        // #endif
+        
+        this.$nextTick(() => {
+          // #ifdef APP
+          this.dataInfo.afterNextTickCallbackTitle = childText.getAttribute('value')!
+          // #endif
+          // #ifndef APP
+          // @ts-ignore
+          this.dataInfo.afterNextTickCallbackTitle = childText.textContent
+          // #endif
+        })
+      },
+      nextTickPromise() {
+        const childText = uni.getElementById('child-text-promise')!
+        this.dataInfo.titleForPromise = 'new title for promise'
+
+        // #ifdef APP
+        this.dataInfo.beforeNextTickPromiseTitle = childText.getAttribute('value')!
+        // #endif
+        // #ifndef APP
+        // @ts-ignore
+        this.dataInfo.beforeNextTickPromiseTitle = childText.textContent
+        // #endif
+        
+        this.$nextTick().then(() => {
+          // #ifdef APP
+          this.dataInfo.afterNextTickPromiseTitle = childText.getAttribute('value')!
+          // #endif
+          // #ifndef APP
+          // @ts-ignore
+          this.dataInfo.afterNextTickPromiseTitle = childText.textContent
+          // #endif
+        })
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/component-instance/nextTick/nextTick-composition.test.js

+const PAGE_PATH = '/pages/component-instance/nextTick/nextTick-composition'
+
+describe('$nextTick()', () => {
+  let page
+
+  it('nextTick page', async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+    
+    let pageDataInfo = await page.data('dataInfo')
+    expect(pageDataInfo.title).toBe('default title')
+    
+    const pageTestNextTickBtn = await page.$('#page-test-next-tick-btn')
+    await pageTestNextTickBtn.tap()
+    await page.waitFor(1000)
+    
+    pageDataInfo = await page.data('dataInfo')
+    expect(pageDataInfo.beforeNextTickTitle).toBe('default title')
+    expect(pageDataInfo.afterNextTickTitle).toBe('new title')
+  });
+  
+  it('nextTick component', async () => {
+    const childComponent = await page.$('#child-component')
+    let childDataInfo = await childComponent.data('dataInfo')
+    expect(childDataInfo.title).toBe('default title')
+    
+    const childTestNextTickBtn = await page.$('#child-test-next-tick-btn')
+    await childTestNextTickBtn.tap()
+    await page.waitFor(1000)
+    
+    childDataInfo = await childComponent.data('dataInfo')
+    expect(childDataInfo.beforeNextTickTitle).toBe('default title')
+    expect(childDataInfo.afterNextTickTitle).toBe('new title')
+  })
+})

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

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">title:</text>
+        <text id="page-text">{{ dataInfo.title }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">before $nextTick title:</text>
+        <text>{{ dataInfo.beforeNextTickTitle }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text ref="text">after $nextTick title:</text>
+        <text>{{ dataInfo.afterNextTickTitle }}</text>
+      </view>
+      <button id="page-test-next-tick-btn" @click="pageTestNextTick">
+        page test $nextTick
+      </button>
+      <Child id="child-component" />
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="uts">
+  import Child from './child-composition.uvue'
+
+  type DataInfo = {
+    title : string
+    beforeNextTickTitle : string
+    afterNextTickTitle : string
+  }
+
+  const dataInfo = reactive({
+    title: 'default title',
+    beforeNextTickTitle: '',
+    afterNextTickTitle: '',
+  } as DataInfo)
+
+  const testNextTick = async () => {
+    const pageText = uni.getElementById('page-text')!
+    dataInfo.title = 'new title'
+
+    // #ifdef APP
+    dataInfo.beforeNextTickTitle = pageText.getAttribute('value')!
+    // #endif
+    // #ifndef APP
+    // @ts-ignore
+    dataInfo.beforeNextTickTitle = pageText.textContent
+    // #endif
+    
+    await nextTick()
+    
+    // #ifdef APP
+    dataInfo.afterNextTickTitle = pageText.getAttribute('value')!
+    // #endif
+    // #ifndef APP
+    // @ts-ignore
+    dataInfo.afterNextTickTitle = pageText.textContent
+    // #endif
+  }
+  const pageTestNextTick = () => {
+    testNextTick()
+  }
+
+  defineExpose({
+    dataInfo
+  })
+</script>
\ No newline at end of file

pages/component-instance/nextTick/nextTick-options.test.js

+const PAGE_PATH = '/pages/component-instance/nextTick/nextTick-options'
+
+describe('$nextTick()', () => {
+  let page
+  it('$nextTick page', async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+
+    let pageDataInfo = await page.data('dataInfo')
+    expect(pageDataInfo.titleForCallback).toBe('default title for callback')
+    expect(pageDataInfo.titleForPromise).toBe('default title for promise')
+
+    const pageTestNextTickBtn = await page.$('#page-test-next-tick-btn')
+    await pageTestNextTickBtn.tap()
+    await page.waitFor(1000)
+
+    pageDataInfo = await page.data('dataInfo')
+    expect(pageDataInfo.beforeNextTickCallbackTitle).toBe('default title for callback')
+    expect(pageDataInfo.afterNextTickCallbackTitle).toBe('new title for callback')
+    expect(pageDataInfo.beforeNextTickPromiseTitle).toBe('default title for promise')
+    expect(pageDataInfo.afterNextTickPromiseTitle).toBe('new title for promise')
+  });
+
+  it('$nextTick component', async () => {
+    const childComponent = await page.$('#child-component')
+    let childDataInfo = await childComponent.data('dataInfo')
+    expect(childDataInfo.titleForCallback).toBe('default title for callback')
+    expect(childDataInfo.titleForPromise).toBe('default title for promise')
+
+    const childTestNextTickBtn = await page.$('#child-test-next-tick-btn')
+    await childTestNextTickBtn.tap()
+    await page.waitFor(1000)
+
+    childDataInfo = await childComponent.data('dataInfo')
+    expect(childDataInfo.beforeNextTickCallbackTitle).toBe('default title for callback')
+    expect(childDataInfo.afterNextTickCallbackTitle).toBe('new title for callback')
+    expect(childDataInfo.beforeNextTickPromiseTitle).toBe('default title for promise')
+    expect(childDataInfo.afterNextTickPromiseTitle).toBe('new title for promise')
+  });
+})
\ No newline at end of file

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

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view class="page">
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for callback:</text>
+        <text id="page-text-callback">{{ dataInfo.titleForCallback }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick callback title:</text>
+        <text>{{ dataInfo.beforeNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick callback title:</text>
+        <text>{{ dataInfo.afterNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for promise:</text>
+        <text id="page-text-promise">{{ dataInfo.titleForPromise }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick promise title:</text>
+        <text>{{ dataInfo.beforeNextTickPromiseTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick promise title:</text>
+        <text>{{ dataInfo.afterNextTickPromiseTitle }}</text>
+      </view>
+      <button id="page-test-next-tick-btn" @click="pageTestNextTick">page test $nextTick</button>
+      <Child id="child-component" />
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  import Child from './child-options.uvue'
+  
+  type DataInfo = {
+    titleForCallback : string
+    beforeNextTickCallbackTitle : string
+    afterNextTickCallbackTitle : string
+    titleForPromise : string
+    beforeNextTickPromiseTitle : string
+    afterNextTickPromiseTitle : string
+  }
+
+  export default {
+    components: {
+      Child
+    },
+    data() {
+      return {
+        dataInfo: {
+          titleForCallback: 'default title for callback',
+          beforeNextTickCallbackTitle: '',
+          afterNextTickCallbackTitle: '',
+          titleForPromise: 'default title for promise',
+          beforeNextTickPromiseTitle: '',
+          afterNextTickPromiseTitle: '',
+        } as DataInfo
+      }
+    },
+    methods: {
+      pageTestNextTick() {
+        this.nextTickCallback()
+        this.nextTickPromise()
+      },
+      nextTickCallback() {
+        const pageText = uni.getElementById('page-text-callback')!
+        this.dataInfo.titleForCallback = 'new title for callback'
+
+        // #ifdef APP
+        this.dataInfo.beforeNextTickCallbackTitle = pageText.getAttribute('value')!
+        // #endif
+        // #ifndef APP
+        // @ts-ignore
+        this.dataInfo.beforeNextTickCallbackTitle = pageText.textContent
+        // #endif
+        
+        this.$nextTick(() => {
+          // #ifdef APP
+          this.dataInfo.afterNextTickCallbackTitle = pageText.getAttribute('value')!
+          // #endif
+          // #ifndef APP
+          // @ts-ignore
+          this.dataInfo.afterNextTickCallbackTitle = pageText.textContent
+          // #endif
+        })
+      },
+      nextTickPromise() {
+        const pageText = uni.getElementById('page-text-promise')!
+        this.dataInfo.titleForPromise = 'new title for promise'
+
+        // #ifdef APP
+        this.dataInfo.beforeNextTickPromiseTitle = pageText.getAttribute('value')!
+        // #endif
+        // #ifndef APP
+        // @ts-ignore
+        this.dataInfo.beforeNextTickPromiseTitle = pageText.textContent
+        // #endif
+        
+        this.$nextTick().then(() => {
+          // #ifdef APP
+          this.dataInfo.afterNextTickPromiseTitle = pageText.getAttribute('value')!
+          // #endif
+          // #ifndef APP
+          // @ts-ignore
+          this.dataInfo.afterNextTickPromiseTitle = pageText.textContent
+          // #endif
+        })
+      }
+    }
+  }
+</script>
\ No newline at end of file

pages/index/index.uvue

@@ -116,7 +116,7 @@ export default {
         },
         {
           id: 'component-instance',
-          name: '组件 实例',
+          name: '组件实例',
           pages: [
             {
               id: 'attrs',
@@ -352,6 +352,22 @@ export default {
                   url: 'provide-composition'
                 },
               ]
+            },
+            {
+              id: 'nextTick',
+              name: 'nextTick',
+              children: [
+                {
+                  id: 'nextTick-options',
+                  name: 'nextTick 选项式 API',
+                  url: 'nextTick-options'
+                },
+                {
+                  id: 'nextTick-composition',
+                  name: 'nextTick 组合式 API',
+                  url: 'nextTick-composition'
+                },
+              ]
             }
           ] as Page[]
         },