vue2生命周期、vue3生命周期、uni-app生命周期

水中牛 發表於 2023-8-11 22:58:00

vue2生命周期、vue3生命周期、uni-app生命周期

<h2>一、生命周期</h2>
Vue 实例有一个完整的生命周期。
也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期
<h2>二、vue2生命周期（钩子函数）</h2>
<h3>（1）钩子函数：</h3>
<ul>
<li>在特定阶段或特定事件发生时被执行的函数</li>
<li>在钩子函数中可以编写逻辑
<ul>
<li>【初始化操作、发送请求、处理DOM、注册事件、挂载之前请求数据、在更新后执行一些额外的逻辑】</li>
</ul>
</li>
</ul>
<h3>（2）常用钩子函数：</h3>
<table border="0">
<tbody>
<tr>
<td>beforeCreate</td>
<td>组件实例被创建之初，组件的属性生效之前</td>
</tr>
<tr>
<td>created</td>
<td>组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用</td>
</tr>
<tr>
<td>beforeMount</td>
<td>在挂载开始之前被调用：相关的 render 函数首次被调用</td>
</tr>
<tr>
<td>mounted</td>
<td>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子【可多次调用】</td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>组件数据更新之前调用，发生在虚拟 DOM 打补丁之前，即在重新渲染之前进行最后的准备工</td>
</tr>
<tr>
<td>updated</td>
<td>组件数据更新之后，重新渲染完成后。此阶段表示Vue实例已经完成了数据更新，并已经重新渲染到DOM</td>
</tr>
<tr>
<td>beforeDestory</td>
<td>组件销毁前调用，此阶段用于清理工作，如移除事件监听器或取消定时器。</td>
</tr>
<tr>
<td>destoryed</td>
<td>组件销毁后调用，此阶段表示Vue实例已经完全销毁，所有的事件监听器和组件实例都已被移除。</td>
</tr>
<tr>
<td>activited</td>
<td>keep-alive 专属，组件被激活时调用</td>
</tr>
<tr>
<td>deadctivated</td>
<td>keep-alive 专属，组件被销毁时调用</td>
</tr>
</tbody>
</table>
<div style="text-align: center">用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数</div>
<div style="text-align: left">
<h3>（3）包含子组件的父组件从创建到销毁过程中，Vue子组件和父组件生命周期的执行顺序</h3>
</div>
<h5 class="md-end-block md-heading md-focus" style="text-align: left">1）加载渲染过程：</h5>
<ol class="ol-list" start="">
<li class="md-list-item">
父组件 beforeCreate
</li>
<li class="md-list-item">
父组件 created
</li>
<li class="md-list-item">
父组件 beforeMount |
</li>
<li class="md-list-item">
子组件 beforeCreate
</li>
<li class="md-list-item">
子组件 created
</li>
<li class="md-list-item">
子组件 beforeMount
</li>
<li class="md-list-item">
子组件 mounted |
</li>
<li class="md-list-item">
父组件 mounted
</li>
</ol>
<h5 class="md-end-block md-heading">2）更新过程</h5>
<ol class="ol-list" start="">
<li class="md-list-item">
父组件 beforeUpdate |
</li>
<li class="md-list-item">
子组件 beforeUpdate
</li>
<li class="md-list-item">
子组件 updated |
</li>
<li class="md-list-item">
父组件 updated
</li>
</ol>
<h5 class="md-end-block md-heading">3）销毁过程</h5>
<ol class="ol-list" start="">
<li class="md-list-item">
父组件 beforeDestroy
</li>
<li class="md-list-item">
子组件 beforeDestroy |
</li>
<li class="md-list-item">
子组件 destroyed
</li>
<li class="md-list-item">
父组件 destoryed |
</li>
</ol>
<h3>（4）举个例子</h3>
<div class="cnblogs_code">
<pre>new Vue({
el: '#app',
data: {
message: '',
userData: null
},
beforeCreate() {
console.log('beforeCreate hook');
// 发送初始化请求获取初始消息，并将其存储在message属性中。
axios.get('/api/initialize').then(response => {
 this.message = response.data.message;
});
},
created() {
console.log('created hook');
// 注册事件，注册了一个滚动事件的监听器
window.addEventListener('scroll', this.handleScroll);
},
beforeMount() {
console.log('beforeMount hook');
// 挂载之前请求数据，发送了一个请求来获取用户数据，并将其存储在userData属性中
axios.get('/api/userData').then(response => {
 this.userData = response.data;
});
},
mounted() {
console.log('mounted hook');
// 执行DOM操作，将特定元素的文字颜色设置为红色
this.$refs.myElement.style.color = 'red';
},
beforeUpdate() {
console.log('beforeUpdate hook');
// 发送更新请求，将userData数据发送至后台
axios.post('/api/update', { data: this.userData });
},
updated() {
console.log('updated hook');
// 在更新后执行额外逻辑，例如调用了handleUpdatedLogic方法
this.handleUpdatedLogic();
},
destroyed() {
console.log('destroyed hook');
// 移除事件监听器，移除了之前注册的滚动事件的监听器
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
//包含了各种方法的对象。您可以在methods对象中定义组件中需要使用的方法;这些方法可以在模板中通过事件绑定或其他方式进行调用
 handleScroll() {
 // 处理滚动事件
 console.log('Scrolling...');
},
handleUpdatedLogic() {
 // 更新后执行的额外逻辑
 console.log('Additional logic after update');
}
}
});</pre>
</div>
<h2>三、vue3生命周期（组合式API）</h2>
<h3>（1）组合式API：</h3>
不是通过声明式方式进行声明，而是在<code>setup()</code>函数中调用相应的函数来使用
<table border="0">
<tbody>
<tr>
<td style="text-align: center">setup()</td>
<td>始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method</td>
</tr>
<tr>
<td>onBeforeMount()</td>
<td>组件挂载到节点上之前执行的函数</td>
</tr>
<tr>
<td>onMounted() :</td>
<td>组件挂载完成后执行的函数</td>
</tr>
<tr>
<td>onBeforeUpdate()</td>
<td>组件更新之前执行的函数</td>
</tr>
<tr>
<td>onUpdated():</td>
<td>组件更新完成之后执行的函数</td>
</tr>
<tr>
<td>onBeforeUnmount()</td>
<td>组件卸载之前执行的函数</td>
</tr>
<tr>
<td>onUnmounted():</td>
<td>组件卸载完成后执行的函数</td>
</tr>
<tr>
<td>onActivated()</td>
<td>被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行；</td>
</tr>
<tr>
<td>onDeactivated()</td>
<td>比如从 A 组件，切换到 B 组件，A 组件消失时执行；</td>
</tr>
<tr>
<td>onErrorCaptured()</td>
<td>当捕获一个来自子孙组件的异常时激活钩子函数。</td>
</tr>
</tbody>
</table>
其他组合式API：
<ul>
<li><code>watch()</code>用于监听响应式数据的变化</li>
<li><code>provide</code>和<code>inject</code>用于提供和注入依赖等。</li>
</ul>
<h3>（2）举个例子：</h3>
<div class="cnblogs_code">
<pre>import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue';

export default {
name: 'MyComponent',
setup() {
// 组件挂载之前执行的函数
onBeforeMount(() => {
 console.log('Component is about to be mounted');
});

// 组件挂载完成后执行的函数
onMounted(() => {
 console.log('Component has been mounted');
});

// 组件更新之前执行的函数
onBeforeUpdate(() => {
 console.log('Component is about to update');
});

// 组件更新完成后执行的函数
onUpdated(() => {
 console.log('Component has been updated');
});

// 组件卸载之前执行的函数
onBeforeUnmount(() => {
 console.log('Component is about to be unmounted');
});

// 组件卸载完成后执行的函数
onUnmounted(() => {
 console.log('Component has been unmounted');
});

// 被激活时执行的函数，例如从父组件切换到子组件时
onActivated(() => {
 console.log('Component has been activated');
});

// 组件不再处于活动状态时执行的函数，例如从子组件切换到父组件时
onDeactivated(() => {
 console.log('Component has been deactivated');
});

// 当捕获来自子组件的异常时激活的函数
onErrorCaptured((error, instance, info) => {
 console.error('Error captured:', error);
});

// 自定义方法：打印一条消息
const printMessage = (message) => {
 console.log(message);
};

return {
 printMessage
};
}
}; </pre>
</div>
<h2>四、uni-app生命周期</h2>
1、应用程序的生命周期方法：定义在根组件app.vue中
onLaunch() 应用程序启动 onShow() 应用程序显示 onHide() 应用程序隐藏
<div class="cnblogs_code">
<pre><template>
<div>
<h1>Hello Vue!</h1>
</div>
</template>

<script>
export default {
name: 'App',
created() {
// 应用程序启动时执行的函数
this.onLaunch();
},
mounted() {
// 应用程序显示时执行的函数
this.onShow();
},
beforeUnmount() {
// 应用程序隐藏时执行的函数
this.onHide();
},
methods: {
onLaunch() {
 console.log('Application launched');
},
onShow() {
 console.log('Application shown');
},
onHide() {
 console.log('Application hidden');
}
}
};
</script></pre>
</div>
 
2、页面的生命周期方法--仿微信小程序
onLoad() 页面挂载完成 onShow() 页面被显示 onReady() 页面可以交互 onHide() 页面被隐藏 onUnload() 页面被卸载
onPageScroll() 页面发生滚动 onReachBottom() 页面滚动触底 onPullDownRefresh() 页面下拉刷新
<div class="cnblogs_code">
<pre><template>
<div>
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
name: 'MyPage',

// 页面数据
data() {
return {
 message: 'Hello Vue!',
};
},

// 页面挂载完成时执行的函数
mounted() {
this.onLoad();
},

// 页面被显示时执行的函数
activated() {
this.onShow();
},

// 页面被隐藏时执行的函数
deactivated() {
this.onHide();
},

// 页面被卸载时执行的函数
beforeUnmount() {
this.onUnload();
},

methods: {
// 页面挂载完成时执行的逻辑
 onLoad() {
 console.log('Page loaded');
},

// 页面被显示时执行的逻辑
 onShow() {
 console.log('Page shown');
},

// 页面被隐藏时执行的逻辑
 onHide() {
 console.log('Page hidden');
},

// 页面被卸载时执行的逻辑
 onUnload() {
 console.log('Page unloaded');
},

// 页面发生滚动时执行的逻辑
 onPageScroll() {
 console.log('Page scrolled');
},

// 页面滚动触底时执行的逻辑
 onReachBottom() {
 console.log('Page reached bottom');
},

// 页面下拉刷新时执行的逻辑
 onPullDownRefresh() {
 console.log('Page pulled down for refresh');
},
},

// 监听页面滚动事件
created() {
window.addEventListener('scroll', this.onPageScroll);
},

// 移除页面滚动事件监听
beforeUnmount() {
window.removeEventListener('scroll', this.onPageScroll);
},
};
</script></pre>
</div>
  
来源：https://www.cnblogs.com/le-cheng/p/17624060.html

頁: [1]

琼殿技术论坛's Archiver

vue2生命周期、vue3生命周期、uni-app生命周期