vue.js中created()與activated()的個(gè)人使用解讀

更新時(shí)間：2023年07月06日 08:55:33 作者：養(yǎng)家糊口的貓

這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue.js中created()與activated()的使用

created()

在創(chuàng)建vue對(duì)象時(shí)，當(dāng)html渲染之前就觸發(fā)；

但是注意，全局vue.js不強(qiáng)制刷新或者重啟時(shí)只創(chuàng)建一次，也就是說(shuō)，created()只會(huì)觸發(fā)一次；

activated()

在vue對(duì)象存活的情況下，進(jìn)入當(dāng)前存在activated()函數(shù)的頁(yè)面時(shí)，一進(jìn)入頁(yè)面就觸發(fā)；可用于初始化頁(yè)面數(shù)據(jù)等

vue.js中created()、activated()、deactivated()理解

created()

在創(chuàng)建vue對(duì)象時(shí)，當(dāng)html渲染之前觸發(fā)；但是注意，全局vue.js不強(qiáng)制刷新或者重啟時(shí)只創(chuàng)建一次，也就是說(shuō)，created()只會(huì)觸發(fā)一次；

activated()

在vue對(duì)象存活的情況下，進(jìn)入當(dāng)前存在activated()函數(shù)的頁(yè)面時(shí)，一進(jìn)入頁(yè)面就觸發(fā)；可用于初始化頁(yè)面數(shù)據(jù)、keepalive緩存組件后，可執(zhí)行方法；

deactivated()

離開(kāi)組件時(shí)執(zhí)行；

注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的時(shí)候才有效；

例：

新建兩個(gè)組件，compA，compB：

<template>
<div class="app">
? ? 我是組件A
</div>
</template>

<script>
? ? export default{
? ? ? ? name: "compA",
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? created(){
? ? ? ? ? ? console.log('created');
? ? ? ? },
? ? ? ? activated(){
? ? ? ? ? ? console.log('activated');
? ? ? ? },
? ? ? ? deactivated(){
? ? ? ? ? ? console.log('deactivated');
? ? ? ? }
? ? }
</script>

同理建compB；

在view中引用兩個(gè)組件：

<template>
<div class="app">
? ? <div class="bth">
? ? ? ? <button @click="currentComponent='compA'">A</button>
? ? ? ? <button @click="currentComponent='compB'">B</button> ? ?
? ? </div>
</div>
<keep-alive>
? ? <component :is="currentComponent"></component>
</keep-alive>
</template>

<script>
? ? import compA from './component/compA'
? ? import compB from './component/compB'
? ? export default{
? ? ? ? name: "App",
? ? ? ? component: {
? ? ? ? ? ? compA, compB
? ? ? ? },
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? currentComponent: 'compA'
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>

在點(diǎn)擊切換B組件時(shí)，A組件的deactivated()會(huì)執(zhí)行；

注：:is后綁定組件名，渲染當(dāng)前組件；

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
Vue文件的組織結(jié)構(gòu)不合理之優(yōu)化項(xiàng)目結(jié)構(gòu)詳解
在這篇博客中,我們將探討 Vue 文件組織結(jié)構(gòu)不合理的幾個(gè)常見(jiàn)問(wèn)題,并提供解決方案,以幫助開(kāi)發(fā)者創(chuàng)建更清晰、更高效的項(xiàng)目文件結(jié)構(gòu),希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
Vue封裝svg-icon組件使用教程
SVG（Scalable?Vector?Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語(yǔ)言，其基本矢量顯示對(duì)象包括矩形、圓、橢圓、多邊形、直線、任意曲線等，還能顯示文字對(duì)象和嵌入式外部圖像
2023-02-02
vue router demo詳解
這篇文章主要為大家詳細(xì)介紹了vue router demo演示代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
vuex存取值和映射函數(shù)使用說(shuō)明
這篇文章主要介紹了vuex存取值和映射函數(shù)使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-10-10
el-descriptions引入代碼中l(wèi)abel不生效問(wèn)題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
通過(guò)vue-cropper選取本地圖片自定義裁切圖片比例
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
el-table表格動(dòng)態(tài)合并行及合并行列實(shí)例詳解
在使用el-table的時(shí)候經(jīng)常會(huì)涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關(guān)于el-table表格動(dòng)態(tài)合并行及合并行列的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue中的計(jì)算屬性傳參
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08