vue的生命周期函数

如下图，这是vue的官网生命周期函数图；

vue的生命周期函数

其中的红色border包裹起来的就是vue的生命周期函数：

beforeCreate（创建前）
created（创建后）
beforeMount（载入前）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

以上是图中的所有函数，我已经将他们按照顺序写下来，接下来来说明他们都是在什么情况下执行的。

（1）beforeCreate是vue实例创建前执行的，在所有vue生命周期函数第一位，当你打开网页，el和data还未初始化。

（2）created完成创建，data已经初始化el尚未初始化

（3）beforeMount载入前，此时el和data都已经初始化

（4）mounted载入后，此时html也已经渲染完成，你的ajax数据可以在这里面请求获得

（5）更新前状态（view层的数据变化前，不是data中的数据改变前）

（6）更新之后执行

（7）beforeDestroy 销毁前

（8）destroy 销毁后（Dom元素存在，只是不再受vue控制）

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title></title>
</head>
<body>
<div id="el">
  <!--{{msg}}-->
  <button @click="handleClick">clickMe</button>
</div>

<script>
  new Vue({
    el: '#el',
    data: {
      msg: 'hello world'
    },
    methods:{
      handleClick: function () {
        this.msg = 'data after modify';
      }
    },
    beforeCreate: function () {
      console.log('vue实例被创建前，data和el还未被初始化');
    },
    created: function () {
      console.log('vue实例被创建成功了，data被初始化了，el还没有');
    },
    beforeMount: function () {
      console.log('这个时候el和data都被初始化了');
    },
    mounted: function () {
      console.log('现在html也被渲染完成');
    },
    beforeUpdate: function () {
      console.log('view层的数据变化前，不是data，可以将我的msg注释掉，这个函数就不会被执行');
    },
    updated: function () {
      console.log('更新之后执行');
    },
    beforeDestroy: function () {
      console.log('beforeDestroy');
    },
    destroyed: function () {
      console.log('destroyed');
    }
  })
</script>

</body>
</html>

vue的生命周期函数

相关推荐