黑马程序员技术交流社区

标题: 【武汉校区】Vue2.0生命周期钩子函数详解 [打印本页]

---

作者: 武汉分校-小舞    时间: 2017-8-17 11:30
标题: 【武汉校区】Vue2.0生命周期钩子函数详解

Vue1.0和Vue2.0生命周期函数变化比较大，下面这张图可以很清楚的看到Vue2.0里面有哪些生命周期函数。但是对于这些函数有什么用,肯定还不是特别清楚。

通过上图我们可以清楚的知道这些函数的执行顺序，其实所谓的生命周期函数就是指Vue实例在创建到解析DOM到页面,直到最后对象被销毁所经历的一系列过程,这个过程中会去执行相应的函数,如果我们程序员想在这个过程中做一些特别的事情,就可以到对应的函数里面去书写代码。

create 和 mounted 相关

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

update 相关
运行代码，在控制台输入app.message= 'coding';能看到data里的值被修改后，将会触发update的操作

destroy 相关我们在console里执行app.$destroy();对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

生命周期总结
搞清楚这些函数具体在什么时候执行，那么对于开发来说有什么用呢?比喻说，我们可以在 beforecreate  里面加个loading事件, created  里面结束loading事件,同时做一些数据请求的操作. mounted 代表真实DOM已经被挂载，那么如果想操作真实DOM可以在这个函数中执行。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2