VUE---10.生命周期

一、生命周期简介

        1. 整个vue运行的流程中 vue向程序员在固定阶段提供方法

        2.  初始化 程序开始运行      

            挂载   展示页面          

            更新   用户更改了数据    

            销毁   关闭    

二、生命周期函数

-- 生命周期函数 -- 钩子函数 以下是执行顺序

      A. beforeCreate

        1. Vue实例化之前执行

        2. 还没有进行methods,data数据初始化

      B. created

        1. Vue实例化之后执行

        2. methods,data等完成了,watch,computed,可以获取到数据;

        3. 发送ajax请求

      C. beforeMount

        1. 虚拟DOM挂载之前执行  模板已经编译完成没有挂载

      D. mounted

        1. 虚拟DOM挂载完之后执行

      E. beforeUpdate

        1. 数据更新之前执行

      F. updated

        1. 数据更新之后执行

      G. beforeDestroy

        1. vue组件销毁之前执行  

        2. 移除自定义事件,定时器,取消ajax请求

      H. destroyed

        1. vue组件销毁之后执行

    · 只有第一次才会执行的函数

              beforeCreate created beforeMount mounted

    · 数据更新,只有数据更新就会执行

              beforeUpdate  updated

    · 销毁一次

              beforeDestroy  destroyed

let vm = new Vue({

            el: "#app",

            // template:"<div>{{name}}--template</div>",

            data() {

                return {

                    name:"666"

                }

            },

            // vue初始化

            beforeCreate(){

                console.log("Vue实例化之前执行",this.name);

            },

            created(){

                console.log("Vue实例化之后执行",this.name);

            },

            beforeMount(){

                console.log("虚拟DOM挂载之前执行");

            },

            mounted(){

                console.log(" 虚拟DOM挂载完之后执行");

            },

            // vue数据更新

            beforeUpdate(){

                console.log(" 数据更新之前执行");

            },

            updated(){

                console.log(" 数据更新之后执行");

            },

            // vue销毁

            beforeDestroy(){

                console.log(" vue组件销毁之前执行");

            },

            destroyed(){

                console.log(" vue组件销毁之后执行");

            }

        })