Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 375
Star 3
Fork 8
H
hello-uvue
提交 263dd924 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

perf(lifecycle): add annotation

上级 32a3f1db
隐藏空白更改
内联 并排
Showing with 551 addition and 519 deletion
App.vue
浏览文件 @ 263dd924
<script lang="ts">
import { state, setLifeCycleNum } from './store/index.uts'
export default {
onLaunch: function () {
setLifeCycleNum(state.lifeCycleNum + 1000)
console.log('App Launch')
const performance : Performance = uni.getPerformance()
const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {
console.log("observer:entryList.getEntries()")
import { state, setLifeCycleNum } from './store/index.uts'
export default {
onLaunch: function () {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1000)
console.log('App Launch')
const performance: Performance = uni.getPerformance()
const observer: PerformanceObserver = performance.createObserver(
(entryList: PerformanceObserverEntryList) => {
console.log('observer:entryList.getEntries()')
console.log(entryList.getEntries())
})
observer.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
},
onShow: function () {
setLifeCycleNum(state.lifeCycleNum + 100)
console.log('App Show')
},
onHide: function () {
setLifeCycleNum(state.lifeCycleNum - 100)
console.log('App Hide')
},
onLastPageBackPress: function (): boolean | null {
setLifeCycleNum(state.lifeCycleNum - 1000)
uni.showToast({
title: '再按一次退出应用',
position: 'bottom'
})
return null
},
}
}
)
observer.observe({
entryTypes: ['render', 'navigation'],
} as PerformanceObserverOptions)
},
onShow: function () {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
console.log('App Show')
},
onHide: function () {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
console.log('App Hide')
},
onLastPageBackPress: function (): boolean | null {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1000)
uni.showToast({
title: '再按一次退出应用',
position: 'bottom',
})
return null
},
}
</script>
<style>
/* @font-face {
/* @font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('./static/fonts/uni.ttf') format('truetype');
} */
.page {
padding: 15px;
}
.uni-panel {
margin-bottom: 12px;
}
.uni-panel-h {
background-color: #ffffff;
flex-direction: row;
align-items: center;
padding: 12px;
}
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-icon {}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-navigate-item {
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
}
.uni-navigate-item:active {
background-color: #f8f8f8;
}
.uni-navigate-text {
color: #000000;
font-size: 12px;
opacity: 0.8;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
.text-disabled {
color: #a0a0a0;
}
.list-item-text {
line-height: 36px;
}
.split-title {
margin: 20px 0 5px;
padding: 5px 0;
border-bottom: 1px solid #dfdfdf;
}
.btn-view {
margin: 10px 0;
padding: 10px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
</style>
\ No newline at end of file
.page {
padding: 15px;
}
.uni-panel {
margin-bottom: 12px;
}
.uni-panel-h {
background-color: #ffffff;
flex-direction: row;
align-items: center;
padding: 12px;
}
.uni-panel-h-on {
background-color: #f0f0f0;
}
.uni-panel-text {
color: #000000;
font-size: 14px;
font-weight: normal;
}
.uni-panel-icon {}
.uni-panel-icon-on {
transform: rotate(180deg);
}
.uni-navigate-item {
flex-direction: row;
align-items: center;
background-color: #ffffff;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
justify-content: space-between;
}
.uni-navigate-item:active {
background-color: #f8f8f8;
}
.uni-navigate-text {
color: #000000;
font-size: 12px;
opacity: 0.8;
}
.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}
.text-disabled {
color: #a0a0a0;
}
.list-item-text {
line-height: 36px;
}
.split-title {
margin: 20px 0 5px;
padding: 5px 0;
border-bottom: 1px solid #dfdfdf;
}
.btn-view {
margin: 10px 0;
padding: 10px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
</style>
components/Lifecycle.uvue
浏览文件 @ 263dd924
<template>
<view>
<text>{{title}}</text>
</view>
<view>
<text>{{ title }}</text>
</view>
</template>
<script lang="ts">
import { state, setLifeCycleNum } from '../store/index.uts'
export default {
name: 'ComponentLifecycle',
data(){
return {
title: 'component for lifecycle test'
}
},
beforeCreate() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeCreate')
},
created() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test created')
},
beforeMount() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeMount')
},
mounted() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
},
beforeUpdate() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeUpdate')
},
updated() {
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test updated')
},
beforeUnmount() {
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test beforeUnmount')
},
unmounted() {
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test unmounted')
},
methods: {
getLifeCycleNum(): number {
return state.lifeCycleNum
}
},
name: 'ComponentLifecycle',
data() {
return {
title: 'component for lifecycle test',
}
},
beforeCreate() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeCreate')
},
created() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test created')
},
beforeMount() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeMount')
},
mounted() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test mounted')
},
beforeUpdate() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test beforeUpdate')
},
updated() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
console.log('component for lifecycle test updated')
},
beforeUnmount() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test beforeUnmount')
},
unmounted() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
console.log('component for lifecycle test unmounted')
},
methods: {
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
pages/index.uvue
浏览文件 @ 263dd924
......@@ -2,13 +2,21 @@
<view class="uni-container">
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" @click="triggerCollapse(item, index)">
<text class="uni-panel-text">{{item.name}}</text>
<text class="uni-panel-text">{{ item.name }}</text>
<!-- <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.open ? '&#xe581;' : '&#xe470;'}}</text> -->
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="page in item.pages" :key="page.name"
@click="goDetailPage(item.id, page)">
<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<view
class="uni-navigate-item"
v-for="page in item.pages"
:key="page.name"
@click="goDetailPage(item.id, page)"
>
<text
class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<!-- <text class="uni-navigate-icon uni-icon">&#xe470;</text> -->
</view>
</view>
......@@ -17,329 +25,329 @@
</template>
<script lang="ts">
import { setLifeCycleNum, state } from '@/store/index.uts'
import { setLifeCycleNum, state } from '@/store/index.uts'
type PageItem = {
name : string,
enable ?: boolean,
url ?: string
}
type PageItem = {
name: string
enable?: boolean
url?: string
}
type PageList = {
id : string,
name : string,
open : boolean,
pages : PageItem[],
url ?: string,
enable ?: boolean
}
type PageList = {
id: string
name: string
open: boolean
pages: PageItem[]
url?: string
enable?: boolean
}
export default {
data() {
return {
list: [
{
id: 'lifecycle',
name: '生命周期',
open: false,
pages: [
{
name: 'page',
url: 'page',
enable: true
},
{
name: 'component',
url: 'component',
enable: true
}
] as PageItem[]
},
{
id: 'directive',
name: '指令',
open: false,
pages: [
{
name: 'v-for',
url: 'v-for',
enable: true
},
{
name: 'v-for-item-click',
url: 'v-for/v-for-item-click',
enable: true
},
{
name: 'v-for-item-v-if',
url: 'v-for/v-for-item-v-if',
enable: true
},
{
name: 'v-for-item-v-show',
url: 'v-for/v-for-item-v-show',
enable: true
},
{
name: 'v-for-v-for',
url: 'v-for/v-for-v-for',
enable: true
},
{
name: 'v-if',
url: 'v-if',
enable: true
},
{
name: 'v-show',
url: 'v-show',
enable: true
},
{
name: 'v-on',
url: 'v-on',
enable: true
},
{
name: 'v-bind',
url: 'v-bind',
enable: true
},
{
name: 'v-model',
url: 'v-model',
enable: true
},
{
name: 'v-slot',
url: 'v-slot',
enable: true
},
{
name: 'v-pre',
url: 'v-pre',
enable: false
},
{
name: 'v-once',
url: 'v-once',
enable: false
},
{
name: 'v-memo',
url: 'v-memo',
enable: false
},
{
name: 'v-cloak',
url: 'v-cloak',
enable: false
},
] as PageItem[]
},
{
id: 'state',
name: '状态',
open: false,
pages: [
{
name: 'data',
url: 'data',
enable: true
},
{
name: 'props',
url: 'props',
enable: true
},
{
name: 'computed',
url: 'computed',
enable: true
},
{
name: 'methods',
url: 'methods',
enable: true
},
{
name: 'watch',
url: 'watch',
enable: true
},
] as PageItem[]
},
{
id: 'rendering',
name: '渲染选项',
open: false,
pages: [
{
name: 'template',
url: 'template',
enable: true
},
{
name: 'render',
url: 'render',
enable: false
},
{
name: 'slots',
url: 'slots',
enable: true
},
] as PageItem[]
},
{
id: 'component-instance',
name: '组件实例',
open: false,
pages: [
{
name: '$data',
url: 'data',
enable: true
},
{
name: '$props',
url: 'props',
enable: true
},
{
name: '$el',
url: 'el',
enable: true
},
{
name: '$options',
url: 'options',
enable: true
},
{
name: '$parent',
url: 'parent',
enable: true
},
{
name: '$root',
url: 'root',
enable: true
},
{
name: '$slots',
url: 'slots',
enable: true
},
{
name: '$refs',
url: 'refs',
enable: true
},
{
name: '$attrs',
url: 'attrs',
enable: true
},
{
name: '$watch',
url: 'watch-function',
enable: true
},
{
name: '$emit',
url: 'emit-function',
enable: true
},
{
name: '$forceUpdate',
url: 'forceUpdate-function',
enable: false
},
{
name: '$nextTick',
url: 'nextTick-function',
enable: true
},
] as PageItem[]
},
{
id: 'composition',
name: '组合选项',
open: false,
pages: [
{
name: 'provide',
url: 'provide',
enable: false
},
{
name: 'inject',
url: 'inject',
enable: false
},
{
name: 'mixins',
url: 'mixins',
enable: false
},
{
name: 'extends',
url: 'extends',
enable: false
},
] as PageItem[]
},
] as PageList[]
export default {
data() {
return {
list: [
{
id: 'lifecycle',
name: '生命周期',
open: false,
pages: [
{
name: 'page',
url: 'page',
enable: true,
},
{
name: 'component',
url: 'component',
enable: true,
},
] as PageItem[],
},
{
id: 'directive',
name: '指令',
open: false,
pages: [
{
name: 'v-for',
url: 'v-for',
enable: true,
},
{
name: 'v-for-item-click',
url: 'v-for/v-for-item-click',
enable: true,
},
{
name: 'v-for-item-v-if',
url: 'v-for/v-for-item-v-if',
enable: true,
},
{
name: 'v-for-item-v-show',
url: 'v-for/v-for-item-v-show',
enable: true,
},
{
name: 'v-for-v-for',
url: 'v-for/v-for-v-for',
enable: true,
},
{
name: 'v-if',
url: 'v-if',
enable: true,
},
{
name: 'v-show',
url: 'v-show',
enable: true,
},
{
name: 'v-on',
url: 'v-on',
enable: true,
},
{
name: 'v-bind',
url: 'v-bind',
enable: true,
},
{
name: 'v-model',
url: 'v-model',
enable: true,
},
{
name: 'v-slot',
url: 'v-slot',
enable: true,
},
{
name: 'v-pre',
url: 'v-pre',
enable: false,
},
{
name: 'v-once',
url: 'v-once',
enable: false,
},
{
name: 'v-memo',
url: 'v-memo',
enable: false,
},
{
name: 'v-cloak',
url: 'v-cloak',
enable: false,
},
] as PageItem[],
},
{
id: 'state',
name: '状态',
open: false,
pages: [
{
name: 'data',
url: 'data',
enable: true,
},
{
name: 'props',
url: 'props',
enable: true,
},
{
name: 'computed',
url: 'computed',
enable: true,
},
{
name: 'methods',
url: 'methods',
enable: true,
},
{
name: 'watch',
url: 'watch',
enable: true,
},
] as PageItem[],
},
{
id: 'rendering',
name: '渲染选项',
open: false,
pages: [
{
name: 'template',
url: 'template',
enable: true,
},
{
name: 'render',
url: 'render',
enable: false,
},
{
name: 'slots',
url: 'slots',
enable: true,
},
] as PageItem[],
},
{
id: 'component-instance',
name: '组件实例',
open: false,
pages: [
{
name: '$data',
url: 'data',
enable: true,
},
{
name: '$props',
url: 'props',
enable: true,
},
{
name: '$el',
url: 'el',
enable: true,
},
{
name: '$options',
url: 'options',
enable: true,
},
{
name: '$parent',
url: 'parent',
enable: true,
},
{
name: '$root',
url: 'root',
enable: true,
},
{
name: '$slots',
url: 'slots',
enable: true,
},
{
name: '$refs',
url: 'refs',
enable: true,
},
{
name: '$attrs',
url: 'attrs',
enable: true,
},
{
name: '$watch',
url: 'watch-function',
enable: true,
},
{
name: '$emit',
url: 'emit-function',
enable: true,
},
{
name: '$forceUpdate',
url: 'forceUpdate-function',
enable: false,
},
{
name: '$nextTick',
url: 'nextTick-function',
enable: true,
},
] as PageItem[],
},
{
id: 'composition',
name: '组合选项',
open: false,
pages: [
{
name: 'provide',
url: 'provide',
enable: false,
},
{
name: 'inject',
url: 'inject',
enable: false,
},
{
name: 'mixins',
url: 'mixins',
enable: false,
},
{
name: 'extends',
url: 'extends',
enable: false,
},
] as PageItem[],
},
] as PageList[],
}
},
methods: {
triggerCollapse(_: PageList, index: number) {
this.list[index].open = !this.list[index].open
},
goDetailPage(id: string, e: PageItem) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持',
})
return
}
const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
uni.navigateTo({
url: `/pages/${id}/${url}`,
})
},
onLoad() {
// 自动化测试
setLifeCycleNum(num: number) {
setLifeCycleNum(num)
},
methods: {
triggerCollapse(_ : PageList, index : number) {
this.list[index].open = !this.list[index].open
},
goDetailPage(id : string, e : PageItem) {
if (e.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
uni.navigateTo({
url: `/pages/${id}/${url}`
})
},
setLifeCycleNum(num : number) {
setLifeCycleNum(num)
},
getLifeCycleNum() : number {
return state.lifeCycleNum
},
}
}
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
<style>
.arrow {
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
}
.arrow {
width: 8px;
height: 8px;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-up {
transform: rotate(45deg);
}
.arrow-up {
transform: rotate(45deg);
}
.arrow-down {
transform: rotate(-135deg);
}
.arrow-down {
transform: rotate(-135deg);
}
</style>
pages/lifecycle/component/component.uvue
浏览文件 @ 263dd924
<template>
<view class="page">
<text>component lifecycle</text>
<component-lifecycle class="component-lifecycle" />
</view>
<view class="page">
<text>component lifecycle</text>
<component-lifecycle class="component-lifecycle" />
</view>
</template>
<script lang="ts">
import ComponentLifecycle from '@/components/Lifecycle.uvue'
import { state } from '@/store/index.uts'
export default {
components: { ComponentLifecycle },
components: { ComponentLifecycle },
methods: {
getLifeCycleNum(): number {
return state.lifeCycleNum
}
},
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
pages/lifecycle/page/page.uvue
浏览文件 @ 263dd924
<template>
<view class="page">
<text>page lifecycle</text>
</view>
<view class="page">
<text>page lifecycle</text>
</view>
</template>
<script lang="ts">
import { state, setLifeCycleNum } from '@/store/index.uts'
export default {
onLoad() {
setLifeCycleNum(state.lifeCycleNum + 100)
console.log('Page onLoad')
},
onShow() {
setLifeCycleNum(state.lifeCycleNum + 10)
console.log('Page onShow')
},
onReady() {
setLifeCycleNum(state.lifeCycleNum + 10)
console.log('Page onReady')
},
onHide() {
setLifeCycleNum(state.lifeCycleNum - 10)
console.log('Page onHide')
},
onUnload() {
setLifeCycleNum(state.lifeCycleNum - 100)
console.log('Page onUnload')
},
onBackPress(options: Map<string, string>) : boolean | null {
setLifeCycleNum(state.lifeCycleNum - 10)
console.log('Page onBackPress',options)
return null
},
methods: {
getLifeCycleNum() : number {
return state.lifeCycleNum
}
},
}
</script>
\ No newline at end of file
import { state, setLifeCycleNum } from '@/store/index.uts'
export default {
onLoad() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
console.log('Page onLoad')
},
onShow() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
console.log('Page onShow')
},
onReady() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
console.log('Page onReady')
},
onHide() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
console.log('Page onHide')
},
onUnload() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
console.log('Page onUnload')
},
onBackPress(options: OnBackPressOptions): boolean | null {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
console.log('Page onBackPress from: ', options.from)
return null
},
methods: {
getLifeCycleNum(): number {
return state.lifeCycleNum
},
},
}
</script>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或