三分钟了解一下Vue的生命周期

153 阅读1分钟
生命周期顾名思义就是Vue从产生到死亡的过程。

当你new一个新的Vue出来时,函数内部先去进行初始化(事件),这里会出现一个名为beforeCreate的钩子(方法)等待被调用。这一步走完后会继续调用一个名为created的方法。

接着下一步判断有没有el选项(“元素”),如果有的话,再判断有没有传template(“模板”)选项。

如果没有el选项,当你在调用vm.$mount(el)的时候,会继续往下走,否则就到此为止,不会继续向下渲染。

如果传了template选项,会继续往下进行编译,将template编译到render函数中(渲染)。

如果没有传template选项,会将el外部的HTML作为template编译。

然后出现一个beforeMount,如果传了就调用,接着开始创建一个vm.$el并用其替换“el”。把真正的HTML字符串拿过来换掉{{}}的模板,然后开始调用mounted(代表页面已经好了挂载完毕)。

当你data被修改的时候,先触发beforeUpdate,虚拟DOM更新一下重新渲染,并应用更新,再去调用updated。

当你在某些时候想要把Vue销毁掉,就需要调用vm.$destroy(存在于页面跳转或切换页面时)。

当调用beforeDestroy时,接触绑定销毁子组件以及事件监听器。然后销毁完毕,最后再走一个destroyed。

以上就是Vue的生命周期。我们用的最多的就是created和mounted。