feat: KeepAlive

common/uni.css

 .uni-common-mt {
   margin-top: 30rpx;
 }
+.uni-common-mb {
+  margin-bottom: 30rpx;
+}
 .bold {
   font-weight: bold;
 }

components/keep-alive/Counter.uvue

+<template>
+	<view>
+		<text class="counter-text">count: {{ count }}</text>
+		<text class="uni-common-mt counter-btn" @click="increment"></text>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		name: 'Counter',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		methods: {
+			increment() {
+				this.count++
+			}
+		}
+	}
+</script>
+
+<style>
+	.counter-btn {
+		height: 40px;
+		line-height: 40px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		text-align: center;
+	}
+</style>

components/keep-alive/Message.uvue

+<template>
+	<view>
+		<text class="uni-common-mt message-text">msg: {{msg}}</text>
+		<text class="uni-common-mt change-message" @click="changeMessage">change message</text>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		name: 'Message',
+		data() {
+			return {
+				msg: 'default message'
+			}
+		},
+		methods: {
+			changeMessage() {
+				this.msg = 'message changed'
+			}
+		}
+	}
+</script>
+
+<style>
+	.change-message {
+		height: 40px;
+		line-height: 40px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		text-align: center;
+	}
+</style>

components/keep-alive/ShouldExclude.uvue

+<template>
+	<view>
+		<text>should not be keep-alive</text>
+		<text class="uni-common-mt should-exclude-text">count: {{ count }}</text>
+		<text class="uni-common-mt should-exclude-btn" @click="increment">+</text>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		name: 'ShouldExclude',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		methods: {
+			increment() {
+				this.count++
+			}
+		}
+	}
+</script>
+
+<style>
+	.should-exclude-btn{
+		height: 40px;
+		line-height: 40px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		text-align: center;
+	}
+</style>

pages.json

@@ -12,6 +12,12 @@
         "navigationBarTitleText": "app instance"
       }
     },
+		{
+			"path": "pages/built-in-component/keep-alive/keep-alive",
+			"style": {
+				"navigationBarTitleText": "keep-alive"
+			}
+		},
     {
       "path": "pages/directive/v-bind/v-bind",
       "style": {

pages/built-in-component/keep-alive/keep-alive.test.js

+const PAGE_PATH = '/pages/built-in-component/keep-alive/keep-alive'
+
+describe('keep-alive', () => {
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('keep-alive', async () => {
+    const shouldExcludeBtns = await page.$$('.should-exclude-btn')
+    for (let i = 0; i < shouldExcludeBtns.length; i++) {
+      await shouldExcludeBtns[i].tap()
+    }
+    let shouldExcludeTexts = await page.$$('.should-exclude-text')
+    for (let i = 0; i < shouldExcludeTexts.length; i++) {
+      expect(await shouldExcludeTexts[i].text()).toBe('count: 1')
+    }
+
+    const showCounterBtn = await page.$('.show-counter')
+    await showCounterBtn.tap()
+
+    const counterBtns = await page.$$('.counter-btn')
+    for (let i = 0; i < counterBtns.length; i++) {
+      await counterBtns[i].tap()
+    }
+
+    const showShouldExcludeBtn = await page.$('.show-should-exclude')
+    await showShouldExcludeBtn.tap()
+
+    shouldExcludeTexts = await page.$$('.should-exclude-text')
+    for (let i = 0; i < shouldExcludeTexts.length; i++) {
+      if (i < shouldExcludeBtns.length - 1) {
+        expect(await shouldExcludeTexts[i].text()).toBe('count: 0')
+      } else {
+        expect(await shouldExcludeTexts[i].text()).toBe('count: 1')
+      }
+    }
+
+    await showCounterBtn.tap()
+
+    let counterTexts = await page.$$('.counter-text')
+    for (let i = 0; i < counterTexts.length; i++) {
+      expect(await counterTexts[i].text()).toBe('count: 1')
+    }
+
+    const showMessageBtn = await page.$('.show-message')
+    await showMessageBtn.tap()
+
+    const chnageMessageBtns = await page.$$('.change-message')
+    for (let i = 0; i < chnageMessageBtns.length; i++) {
+      await chnageMessageBtns[i].tap()
+    }
+
+    let messageTexts = await page.$$('.message-text')
+    for (let i = 0; i < messageTexts.length; i++) {
+      expect(await messageTexts[i].text()).toBe('msg: message changed')
+    }
+
+    await showCounterBtn.tap()
+
+    counterTexts = await page.$$('.counter-text')
+    for (let i = 0; i < counterTexts.length; i++) {
+      expect(await counterTexts[i].text()).toBe('count: 1')
+    }
+
+    await showMessageBtn.tap()
+
+    messageTexts = await page.$$('.message-text')
+    for (let i = 0; i < messageTexts.length; i++) {
+      expect(await messageTexts[i].text()).toBe('msg: message changed')
+    }
+
+    await showShouldExcludeBtn.tap()
+    shouldExcludeTexts = await page.$$('.should-exclude-text')
+    for (let i = 0; i < shouldExcludeTexts.length; i++) {
+      expect(await shouldExcludeTexts[i].text()).toBe('count: 0')
+    }
+  })
+})

pages/built-in-component/keep-alive/keep-alive.uvue

+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+	<!-- #endif -->
+		<view class="page">
+			<text class="bold uni-common-mb">include "Counter,Message"</text>
+			<KeepAlive include="Counter,Message">
+				<component :is='currentComponent'></component>
+			</KeepAlive>
+			<view class="hr"></view>
+			<text class="bold uni-common-mt uni-common-mb">include "/Counter|Message/"</text>
+			<KeepAlive :include="/Counter|Message/">
+				<component :is='currentComponent'></component>
+			</KeepAlive>
+			<view class="hr"></view>
+			<text class="bold uni-common-mt uni-common-mb">include "['Counter', 'Message']"</text>
+			<KeepAlive :include="['Counter', 'Message']">
+				<component :is='currentComponent'></component>
+			</KeepAlive>
+			<view class="hr"></view>
+			<text class="bold uni-common-mt uni-common-mb">exclude "ShouldExclude"</text>
+			<KeepAlive exclude="ShouldExclude">
+				<component :is='currentComponent'></component>
+			</KeepAlive>
+			<view class="hr"></view>
+			<text class="bold uni-common-mt uni-common-mb">max 2</text>
+			<KeepAlive :max="2">
+				<component :is='currentComponent'></component>
+			</KeepAlive>
+			<view class="hr"></view>
+			<button class="uni-common-mt show-counter" @click="changeComponent('Counter')">show Counter</button>
+			<button class="uni-common-mt show-message" @click="changeComponent('Message')">show Message</button>
+			<button class="uni-common-mt show-should-exclude" @click="changeComponent('ShouldExclude')">show ShouldExclude</button>
+		</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script lang="uts">
+	import Counter from '@/components/keep-alive/Counter.uvue'
+	import Message from '@/components/keep-alive/Message.uvue'
+	import ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'
+	export default {
+		components: {
+			Counter,
+			Message,
+			ShouldExclude
+		},
+		data() {
+			return {
+				currentComponent: 'ShouldExclude'
+			}
+		},
+		methods: {
+			changeComponent(componentName : string) {
+				this.currentComponent = componentName
+			}
+		}
+	}
+</script>
+
+<style>
+	.hr {
+		margin-top: 30rpx;
+		border-bottom: 1px solid #ccc;
+	}
+</style>

pages/index.uvue

@@ -51,18 +51,30 @@
     data() {
       return {
         list: [
-          {
-            id: 'app-instance',
-            name: 'App 实例',
-            open: false,
-            pages: [
-              {
-                name: 'index',
-                url: 'index',
-                enable: true,
-              },
-            ] as PageItem[],
-          },
+          {
+            id: 'app-instance',
+            name: 'App 实例',
+            open: false,
+            pages: [
+              {
+                name: 'index',
+                url: 'index',
+                enable: true,
+              },
+            ] as PageItem[],
+          },
+					{
+					  id: 'built-in-component',
+					  name: '内置组件',
+					  open: false,
+					  pages: [
+					    {
+					      name: 'keepAlive',
+					      url: 'keep-alive',
+					      enable: true,
+					    },
+					  ] as PageItem[],
+					},
           {
             id: 'lifecycle',
             name: '生命周期',