【vue学习】vue的生命周期函数

每个Vue组件都有生命周期，过程为创建 -> 挂载 -> 更新 -> 销毁。开发者可以通过钩子函数（如mounted）在组件生命周期中的不同时刻进行操作。

生命周期图示

生命周期函数就是vue实例在某一个时间点会自动执行的函数

vue生命周期函数

当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤。

钩子函数	触发的行为
beforeCreate	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created	vue实例的数据对象data有了，$el还没有
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted	vue实例挂载完成，data.filter成功渲染
beforeUpdate	data更新时触发
updated	data更新时触发
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

beforeCreate

Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动执行一个函数，这个函数就是beforeCreate

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　}
})

我们发现这个在控制台被自动输出了，就是vue自动执行了beforeCreate这个函数，处理完这个函数，vue会继续调用一个写外部的注入，包括双向绑定的相关内容

created

Init(injections & reactivity): 外部的注射，各种绑定的初始化，这部分初始化完成的时候，基本上vue实例的初始化操作都完成了，在这个结点上，又会有一个自动的函数被执行,这个函数的名字叫created

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　}
})

beforeMount

Has ‘el’ options:是否有el这个选项
Has ‘template’ optioins: 是否有template这个属性
　　no->Compile el’s outerHtml as template: 如果实例里面没有tempalte这个属性，会把外部el挂载点的html当作模板
　　yes->Compile template into render functoin: 如果实例里面有tempalte，这个时候就会用template去渲染
但是有了模板之后并没有直接渲染到页面上，在渲染之前，又自动去执行了一个函数，这个函数是beforeMount

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log('before mount')
　　}
})

模板即将挂载到页面到一瞬间，beforeMount会被执行

mounted

Create vm.$el and replace ‘el’ width it: 模板结合数据会被挂载到页面上，当dom挂载到页面之上，这个时候mounted函数被执行了
在beforeMount dom并没有渲染到页面上，在mounted dom已经被渲染到页面上了

<div id='app'>
　　hello world　　
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　template:'<h1>hello</h1>',
　　　　beforeCreate:function(){
　　　　　　console.log('before create')
　　　　},
　　　　created:function(){
　　　　　　console.log('created')
　　　　},
　　　　beforeMount:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('before mount')
　　　　},
　　　　mounted:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('mounted')
　　　　}
　　})
</script>

看到在beforeMount输出当dom是

hello world

在mounted输出的dom是

hello

beforeDestroy、destroyed

var vm = new Vue({
　　el:'#app',　　
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　　},
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　}
})

刷新页面完毕，这个时候会发现beforeDestroy,destroyed并没有被触发
when vm.$ destroy() is called:当destroy()这个方法被调用的时候会调用beforeDestroy，当全部销毁的时候，destroyed会被执行，那怎么让他执行呢，在控制台执行vm.$destroy()的时候会调用这两个函数，还没被销毁之前会调用beforeDestroy，已经被销毁后会调用destroyed这个函数

destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

beforeUpdate、updated

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　 },
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　},
　　beforeUpdate:function(){
　　　　console.log('before updated')
　　},
　　updated:function(){
　　　　console.log('updated')
　　}
})

刷新页面看，发现这两个钩子函数其实并没有被执行
when data changes，当数据发生改变的时候才会被执行
beforeUpdate：数据发生改变，还没有被渲染之前，beforeUpdate会被执行
updated：当数据重新渲染之后，updated这个生命周期函数会被执行

组件套用时生命周期

父组件：tabs
子组件：tab、tab-container
我的应用场景是：

<tabs>
  <tab />
  <tab />
  <tab />
  <tab-container />
</tabs>

/*tabs的打印代码*/
  beforeMount () {
    console.log('============Tabs befortemounted==============')
  },
  mounted () {
    console.log('============Tabs mounted==============')
  },
  created () {
    console.log('============Tabs created==============')
  }

/*tab的打印代码*/
  beforeMount () {
    console.log('----------------tab beforemounted-------------')
  },
  mounted () {
    this.$parent.panes.push(this)
    console.log('----------------tab mounted-------------')
  },
  created () {
    console.log('----------------tab created-------------')
  }

/*tab-container的打印代码*/
  beforeMount () {
    console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!')
  },
  mounted () {
    console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!')
  },
  created () {
    console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!')
  }

浏览器结果：

结论：
先执行父组件的created和beforeMounted函数；再按子组件的使用顺序，执行子组件的created和beforeMounted函数；依旧按照子组件的执行顺序执行mounted函数，最后是父组件的mounted函数；
也就是说父组件准备要挂载还没挂载的时候，子组件先完成挂载，最后父组件再挂载。