Vue 生命周期图解 代码解释

vue生命周期简介

Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

常用的 钩子函数：

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

代码解释：

var vm = new Vue({
      el: '#app',
      data: {
        msg: "IT程序员的日常"
      },
      methods: {
        say() {
          console.log("IT程序员的日常");
        }
      },
      beforeCreate() {
        /*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
        //console.log(this.msg);
        //this.say();
        //console.log(this.say);
      },
      created() {
        /*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
        * 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
        */
        //console.log(this.msg);
        //this.say();
        // console.log(this.say);
      },
      beforeMount() {
        /*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
        // console.log(document.querySelector("p").innerText);
        // console.log(document.querySelector("p").innerHTML);
      },
      mounted() {
        /*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
        console.log(document.querySelector("p").innerText);
        console.log(document.querySelector("p").innerHTML);
      },
      beforeUpdate() {
        /*主要data中的数据发生了变化就会执行
        * 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
        *
        * */
        // console.log(this.msg);
        // console.log(document.querySelector("p").innerText);
        // console.log(document.querySelector("p").innerHTML);
      },
      updated() {
        /*主要data中的数据发生了变化就会执行
       * 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
       *
       * */
        console.log(this.msg);
        console.log(document.querySelector("p").innerText);
        console.log(document.querySelector("p").innerHTML);
      },
      beforeDestroy() {
        /*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
        * 最后能使用Vue实例的地址
        * */
      },
      destroyed() {
        /*
        * 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
        * */
      }

    })