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

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

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

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

created()

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

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

activated()

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

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

created()

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

activated()

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

deactivated()

離開組件時執(zhí)行；

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

例：

新建兩個組件，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中引用兩個組件：

<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>

在點擊切換B組件時，A組件的deactivated()會執(zhí)行；

注：:is后綁定組件名，渲染當前組件；