
new Vue()
创建一个Vue实例
beforeCreate
当执行到beforeCreate函数的时候,data上的数据还没有初始化好,methods中的方法也还没有初始化好,不可以去访问其中的数据和方法
created
当执行到create函数的时候,data和methods都已经初始化完毕了,此时,可以去访问其中的数据和方法了。
结论:
如果要操作data中的数据,或调用methods中的函数,最早,只能在created函数中进行
模板编译
这个阶段中,Vue正在编译我们的模板页面。当这个阶段执行完毕后,我们在浏览器的内存中,就已经有了编译好的页面结构了,但是这个编译好的模板结构只是在内存中,还没有被渲染到页面上,此时页面上是空白的。
beforeMounted
当模板页面被编译好之后,就会立即执行beforeMounted这个函数。此时,我们的HTML代码结构己经在内存中创建好了,但是尚未挂载到页面中。
结论:
在这个函数中,页面上的DOM元素是原始的差值表达式之类的Vue代码;
mounted
当执行完mounted函数,页面就已经真正的渲染好了,此时,Vue实例的创建阶段即将结束。
结论:
如果要引用一些第三方的插件来操作DOM元素,最好在mounted中去操作DOM元素,因为这时候才是真正的页面
beforeDestroy
在执行beforeDestroy函数的时候,VM实例还是正常可用的状态,此时还没有开始销毁。
destroyed
在destroyed函数中,VM实例被销毁不可正常使用。
网友评论