Vue的生命周期函数

vue的一生：

人从出生到童年、青年、壮年、不惑，到死亡。会经历不同的时期。vue实例也不例外。
每个vue实例从创建到销毁的过程就是vue的一个生命周期，每个阶段都有对应的钩子函数，当我们想在vue的不同时期操作vue实例是，就可以在不同的钩子函数中进行

要知道vue的生命周期是什么，主要从以下几个方面来讲：

1.vue的生命周期是什么

2.vue生命周期的在项目中的执行顺序

3.vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch）

4.自己构造的方法与vue生命周期的运行顺序 如show这些

5.总结

---

一、vue的生命周期是什么

 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

如图：

二、vue生命周期的在项目中的执行顺序

通过打印数据来看这几个钩子函数的执行顺序。

在data里面设置的数据：

data () {

    return {

    rendered: false,

    }

}

1、beforeCreated

这个时候this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得。

beforeCeate(){

    console.log(this.rendered);    // undefined  

}

2、created
这个时候可以操作vue中的数据和方法，但是还不能对dom节点进行操作。

 

created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

 

   

}

3、beforeMount
在挂载开始之前被调用：相关的render 函数首次被调用。
说明：$el属性已存在，是虚拟dom，只是数据未挂载到模板中。

beforeMount() {

    console.log(this.$el)；//undefined

     

} 

4、mounted

挂载完毕，这时dom节点被渲染到文档内，dom操作在此时能正常进行

.mounted() {

    console.log(this.$el);

}

5、beforeUpdate

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

beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。

6、updated

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick替换掉 updated：
说明：view层的数据更新后，data中的数据同beforeUpdate，都是更新完以后的。

7 .beforeDestroy
官方解释：实例销毁之前调用。在这一步，实例仍然完全可用。

beforeDestroy(){

    console.log(this.$el);

    console.log(this.rendered); 

}

8、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
说明：执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

destroyed() {

    console.log(this.$el);

    console.log(this.rendered);

} 

三、vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch、props)

 从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；

那问题来了，data props computed watch methods他们之间的生成顺序是什么呢？

props => methods =>data => computed => watch;

四、总结

beforecreate：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
destoryed ：当前实例已被销毁，解绑相关指令和事件监听器

重点：父子组件嵌套时触发钩子函数顺序

组件挂载阶段

父组件beforeCreate=>>父组件created=>>父组件beforeMount=>>子组件beforeCreate=>>子组件created=>>子组件beforeMount=>>子组件mounted=>>父组件mounted

即从创建到挂载，是从外到内，再从内到外

组件更新阶段

父组件beforeUpdate=>>父组件updated

组件销毁阶段

父组件beforeDestroy=>>子组件beforeDestroy=>>子组件destroyed父组件destroyed

即销毁是从外到内，再从内到外