详解Vue生命周期【上】

时间 2019-11-07 标签详解 vue 生命周期

前言

生命周期是理解Vue的一个很是重要的环节，初学Vue时可能会出现数据渲染的失败的错误，所以打算写两篇博客详细介绍Vue的生命周期：html

单个组件的Vue生命周期（本文）
多个组件的Vue生命周期

Vue生命周期

1.1 beforeCreate()

说明

在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用；data、computed、watch、methods和DOM都不能使用vue

data () {
    return {
      msg: 1
    }
  },
  beforeCreate() {
    console.log(this.$data)  //undefined
    console.log(this.$el)    //undefined
  }
复制代码

注意

若是非要在beforeCreate()取data也不是没有办法，异步方式能够经过this.$nextTick()或seTimeout，同步方式能够经过this.$options。固然通常不会这么操做。web

beforeCreate() {
    this.$nextTick(() => {       
      console.log(this.msg)                  //1
    })

    setTimeout(()=> {
      console.log(this.msg)                  //1
    }, 1000)

    console.log(this.$options.data()["msg"]) //1
  }
复制代码

1.2 created()

说明

在实例建立完成后被当即调用，能够操做data、computed、watch、methods，但DOM还没挂载，不能操做。api

created () {
    this.getMsg()          //1
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  },
  methods: {
    getMsg() {
      console.log(this.msg)
    }
  }
复制代码

一般在此进行页面初始化操做或简单的Ajax请求（此时页面还未呈现，过多的请求会致使白屏）异步

1.3 beforeMount()

说明

在挂载开始以前被调用：相关的 render 函数首次被调用。这一步没啥特别的，不多在此进行操做。函数

beforeMount() {
    console.log(this.msg)  //1
    console.log(this.$el)  //undefined
  }
复制代码

1.4 mounted()

说明

实例被挂载到DOM上。一般用于执行Ajax请求。post

mounted() {
    console.log(this.msg)  //1
    console.log(this.$el)   //可看到 DOM 的信息
  }
复制代码

注意

mounted 不保证全部子组件都一块儿被挂载了。若想要等整个视图都渲染完毕再操做，可使用 this.$nextTickui

mounted() {
    this.$nextTick()
  }
复制代码

1.5 beforeUpdate()

只有数据更新时才调用，发生在虚拟 DOM 打补丁以前。适合在更新以前访问现有的 DOM，好比手动移除已添加的事件监听器。this

<div>{{msg}}</div>
复制代码

mounted() {   
    this.msg = 2
  },
  beforeUpdate: function() {
    console.log(this.$el.innerHTML)  //1
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
复制代码

1.6 updated()

说明

虚拟 DOM 从新渲染和打补丁以后调用，组件DOM已经更新，能够执行依赖于DOM的操做。spa

mounted() {   
    this.msg = 2
  },
  updated: function() {
    console.log(this.$el.innerHTML)  //2
    console.log(this.$el)            //<div ...> 2 </div>
    console.log(this.msg)            //2
  }
复制代码

注意

updated 不保证全部子组件都被重绘了。若想要等到整个视图都重绘完毕再操做，能够用 this.$nextTick

1.7 beforeDestroy()

说明

实例销毁前调用，这里没什么特殊的，该用的仍然可用

beforeDestroy() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
复制代码

1.8 destroyed()

说明

Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

这里我一开始的理解是数据不能用了，结果还依然打印了数据，不解中……

destroyed() {
    console.log(this.msg)  //2
    console.log(this.$el)  //<div ...> 2 </div>
  }
复制代码

总结

Vue的生命周期能够总结为3个阶段：

初始化阶段（执行1次）：beforeCreate、created、beforeMount、mounted
数据更新阶段（执行屡次）：beforeUpdate、updated
销毁阶段/切换组件（执行1次）：beforeDestory、destroyed
用得比较多的就是 created 和 mounted 了

参考

感谢看完的朋友点个赞，感谢鼓励和支持！