vue常用的函数

钩子函数

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
        //   组件实例刚刚被创建，组件属性计算之前
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message) //undefined  
        },
        created: function () {
            // 组件实例创建完成，但是DOM还未生成。
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            // 模板编译挂载之前
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            // 模板编译挂载之后
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            // 组件更新之前
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            // 组件更新之后
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            // 组件销毁前
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            // 组件销毁后
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>

keep-alive 组件

vue抽象的一个组件，用来对组件进行缓存
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
        <template>
      <div id="app">
        <keep-alive>
         <router-view/>
        </keep-alive>
           <!-- <keep-alive>数据缓存， 已经请求过的数据存储到内存中不再发送请求直接在内存中获取 -->
      </div>
    </template>

    activated:function(){
        //keep-alive组件被激活时调用
    }
    
    deactivated：function(){
        //keep-alive组件被销毁时调用
    }

钩子函数一般什么时候用

    beforecreate : 举个栗子：可以在这加个loading事件
    created ：在这结束loading，还做一些初始化，实现函数自执行
    mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
    beforeDestroy： 你确认删除XX吗？
    destroyed ：当前组件已被删除，清空相关内容。