Vue的生命周期

 

Vue的生命周期图

 

红色圈出来的都是钩子函数，成对的，和el、template、data一个级别。

组件也是一个Vue实例，也有这些生命周期，并不是说要显式new Vue()才是一个Vue对象。

 

 

 

demo   Vue的生命周期

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
        
    </head>
    <body>
        
    <div id="app"></div>
    
    <script src="js/test.js"></script>        
        
    </body>
</html>

把js脚本单独拿了出来

 

 

test.js

    Vue.component('Test',{
        template:`
            <div>
                <p>{{msg}},我是test组件</p>
                <button @click='msg+=" chy"'>更新数据</button>  <!-- +是字符串拼接 -->
            </div>
        `,
        data(){
            return{
                msg:'hello'
            }
        },
        
        
        // 组件创建前，数据尚未挂载
        beforeCreate(){
            console.log('组件创建前',this.msg);  //this.msg是undefined
        },
        // 组件创建后，数据已挂载
        created(){
            console.log('组件创建后',this.msg);  //this.msg有值
        },
        // dom挂载前，此时此组件的dom尚未挂载
        beforeMount() {
            console.log('dom挂载前',document.body.innerHTML);  //<div id="app"></div>
        },
        // dom挂载后，此时此组件的dom已挂载
        mounted() {
            console.log('dom挂载后',document.body.innerHTML);  //<div><div><p>hello,我是test组件</p></div></div>
        },
        
        
        // 组件激活。dom挂载后，组件会被激活
        activated() {
            console.log('组件激活')
        },
        // 组件停用
        deactivated() {
            console.log('组件停用');
        },
        
        
        // 数据更新前，数据指的是内存中的数据，比如msg
        beforeUpdate() {
            console.log('数据更新前',document.body.innerHTML);
        },
        // 数据更新后
        updated() {
            console.log('数据更新后',document.body.innerHTML);  //如果打印的是this.msg，数据要已发生更新才能界定更新前后，此时数据已变了，更新前后打印出来的this.msg是一样的
        },
        
        
        // 组件销毁前
        beforeDestroy() {
            console.log('组件销毁前');
        },
        // 组件销毁后
        destroyed() {
            console.log('组件销毁后');
        },
        
        
    })



        
    new Vue({
        el:'#app',
        template:`
            <div>
                <Test v-if='display'></Test> <!--绑定内存中给的display变量。v-if不显示组件时，会销毁组件；显示组件时，是重新创建组件-->
                <button @click='createOrDestroy'>销毁|创建组件</button>
            </div>
        `,
        data(){
            return{
                display:true
            }
        },
        methods:{
            createOrDestroy(){
                this.display=!this.display;  //换为相反的
            }
        }
    });
    
<keep-alive><Test v-if='display'></Test></keep-alive>

 

 

 

性能调优

频繁的新建组件对性能有很大的影响。可以把组件放在<keep-alive>中：

<keep-alive> <Test v-if='display'></Test> </keep-alive>

这样v-if为false时会缓存组件（停用组件），并不是直接销毁；当v-if为true时又激活组件。

 

posted @ 2020-04-02 11:49  chy-x  阅读(524)  评论(0)    收藏  举报