缓存组件的生命周期钩子函数

最新推荐文章于 2024-07-20 10:45:00 发布

该睡觉觉了

最新推荐文章于 2024-07-20 10:45:00 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115384611

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

缓存组件

keep-alive 缓存标签组件

缓存组件的生命周期钩子函数

activated激活时状态
deactivated 失活时状态

注意:

1.使用keep-alive包裹的组件就是缓存组件
2.只有在缓存组件才会出现缓存组件的生命周期钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 作用域 -->
    <div id="app">
        <!-- 方式二 -->
        <button @click="change('v-login')">登录</button>
        <button @click="change('v-reg')">注册</button>
        <button @click="change('v-home')">首页</button>

        <!-- 方式二: component 标签组件 -->
        <!-- keep-alive  缓存标签组件 -->
        <keep-alive>
            <component :is="isShow"></component>
        </keep-alive>
        
    </div>

    <!-- login组件 -->
    <template id="login">
        <div class="login">
            <h1>{{title}}</h1>
        </div>
    </template>

    <!-- reg组件 -->
    <template id="reg">
        <div class="reg">
            <h1>{{title}}</h1>
        </div>
    </template>

    <!-- home组件 -->
    <template id="home">
        <div class="home">
            <h1>{{title}}</h1>
        </div>
    </template>
    <script>
        const vLogin = {
                        template:'#login',
                        data(){
                            return {
                                title:'欢迎登录'
                            }
                        },
                        // 创建完成
                        created(){
                            console.log('login-create');
                        },
                        // 激活时的状态
                        activated(){
                            console.log('login-activated');
                        },
                        // 失活时的状态
                        deactivated(){
                            console.log('login-deactivated');
                        }
                    }
        const vReg = {
                        template:'#reg',
                        data(){
                            return {
                                title:'欢迎注册'
                            }
                        },
                         // 创建完成
                         created(){
                            console.log('reg-create');
                        },
                        // 激活时的状态
                        activated(){
                            console.log('reg-activated');
                        },
                        // 失活时的状态
                        deactivated(){
                            console.log('reg-deactivated');
                        }
                    }
        const vHome = {
                        template:'#home',
                        data(){
                            return {
                                title:'欢迎来到德玛西亚'
                            }
                        },
                         // 创建完成
                        created(){
                            console.log('home-create');
                        },
                        // 激活时的状态
                        activated(){
                            console.log('home-activated');
                        },
                        // 失活时的状态
                        deactivated(){
                            console.log('home-deactivated');
                        }
                    }
        // 实例化vue
        new Vue({
            el:'#app',
            data:{
                isShow:'v-login'
            },
            methods:{
                change(name){
                    this.isShow = name;
                }
            },
            components:{
                vLogin,
                vReg,
                vHome,
            }
        })
    </script>
</body>
</html>

总结:
	vue中系统自动注入的标签:
		template
		component
		transition
		keep-alive(缓存标签)

该睡觉觉了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓存组件的生命周期钩子函数

缓存组件keep-alive 缓存标签组件缓存组件的生命周期钩子函数activated激活时状态deactivated 失活时状态注意:1.使用keep-alive包裹的组件就是缓存组件2.只有在缓存组件才会出现缓存组件的生命周期钩子函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
复制链接

扫一扫

专栏目录