02.vue的生命周期

时间:2021-10-05 14:41:11

vue实例在被创建之后会有自己的生命周期钩子函数,这些钩子函数包含了vue实例被创建前的数据观测阶段,将实例挂载到dom中,vue实例被更新以及被销毁的一整个过程。

让我们看看vue有哪些钩子函数,上代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UFT-8">

    <title></title>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

  </head>

  <body>

    <div id="app">

      {{message}}

    </div>

  </body>

</html>

<script type="text/javascript">

  new vue({

    el: "#app",

    data:{

      messsage:  "hello vue.js"

    },

    //vue实例创建之前,数据观测和初始化事件还未开始

    beforeCreate(){

      console.log("vue实例创建之前")

    },

    //vue实例创建,完成数据观测,初始化事件

    created(){

      console.log("vue实例被创建")

    },

    //vue实例被挂载之前,调用此函数,首次调用render函数,实例完成部分内容,为挂载到HTML页面中

    beforeMount(){

     console.log("vue实例被挂载之前") 

    },

    //vue实例被挂载,实例中的HTML模板渲染到HTML页面中

    mounted(){

      console.log("vue实例被挂载")

    },

    //vue实例更新之前,调用此函数,可更改组件的状态,但不会触发附加的重渲染过程

    beforeUpdate(){

      console.log("vue实例更新之前")

    },

    //vue实例被更新,调用函数,DOM更新,执行依赖DOM的操作

    updated(){

      console.log("vue实例更新")

    },

    //销毁前,实例销毁前调用,实例仍然可以使用

    beforeDestroy(){

      console.log("vue实例被销毁之前")

    },

    //vue实例被销毁,移除所有监听函数,销毁所有的子组件

    destroyed(){

      console.log("vue实例被销毁")

    }

  })

 

摘取图片一枚,以便理解

  02.vue的生命周期