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可以在这个函数中执行。
|