vue生命周期（通俗）（5）

import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 0
  },
  beforeCreate () {
    console.log(this, 'breforeCreate')
  },
  created () {
    console.log(this, 'created')
  },
  beforeMount () {
    console.log(this, 'beforeMount')
  },
  mounted () {
    console.log(this, 'mounted')
  },
  beforeUpdate () {
    console.log(this, 'beforeUpdate')
  },
  updated () {
    console.log(this, 'updated')
  },
  activated () {
    console.log(this, 'activated')
  },
  deactivated () {
    console.log(this, 'deactivated')
  },
  beforeDestroy () {
    console.log(this, 'beforeDestroy')
  },
  destroyed () {
    console.log(this, 'destroyed')
  }
})

app.$mount('#root')

结果依次显示：
“breforeCreate” “created” “beforeMount” “mounted”，说明在new Vue()时，这四个方法执行了。

breforeMount 和 mounted

如果把el：‘#root’注释掉，就只显示“breforeCreate” “created” ，因为mount的作用就是把vue组件生成的html内容，挂载到html节点上，所以当我们没有指定el：‘#root’或通过$mount进行，是不会挂载到html节点上的

breforeCreate 和 created

而 breforeCreate created 在初始化阶段就执行了。

beforeUpdate 和 updated

数据更新时，才会执行。
例如，每一秒钟更改数据，相应的每秒都会执行这两个生命周期

setInterval(() => {
  app.text = app.text += 1
}, 1000)

beforeDestroy 和 destroyed

vue实例销毁时执行。
例如，设置一秒钟后销毁，控制台就会显示 “beforeDestroy” 和 “destroyed”

setTimeout(() => {
  app.$destroy()
}, 1000)

activated 和 deactivated

和vue中一个原生的组件 keep-alive有关系。

---

分别打印出不同周期对应的$el

beforeCreate () {
    console.log(this.$el, 'breforeCreate')
  },
  created () {
    console.log(this.$el, 'created')
  },
  beforeMount () {
    console.log(this.$el, 'beforeMount')
  },
  mounted () {
    console.log(this.$el, 'mounted')
  },

显示结果

undefined "beforeCreate"
undefined "created"
<div id="root"></div> "beforeMount"
<div>0</div> "mounted"

可以看到
beforeCreate 和 created 的 $el 是undefined，所以 beforeCreate 和 created 阶段是不能进行dom操作的，因为拿不到 dom 节点。

brforeMount 时，$el变成了我们写在 html 中 div 节点。

mounted 时， $el变成了 template 中的html，说明覆盖了html原来的 div 节点。

因此

• 做 dom 相关操作会在 mounted 阶段
• 数据相关操作，可以在 created 或 mounted 阶段

生命周期的调用顺序

beforeCreate created beforeMount mounted 都是一次性的，组件只会调用一次。

beforeMount mounted 在服务端渲染，是不会被调用的，服务端渲染过程中，只会调用 beforeCreate created，因为 mount 是和 dom 操作相关的，服务端根本没有 dom 执行的环境， 所以不会有。

当数据发生变化时，beforeUpdate 和 updated 会调用。

理解生命周期就是理解一张图

创建前/后beforeCreate/created：

在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有

载入前/后beforeMount/mounted：

在beforeMount阶段，vue实例的el和data都初始化了，但还是挂载之前为虚拟的dom节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。

更新前/后beforeUpdate/updated：

当data变化时，会触发beforeUpdate和updated方法。不常用

销毁前/后beforeDestory/destoryed：

beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件

执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在