vue mvvm模板定义与vue生命周期

#vue mvvm模板
vue作为前端框架 肯定封装好了便捷的框架 接下来我们看看vue mvvm模板
vue mvvm模板定义与vue生命周期_第1张图片
#vue生命周期
从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期.
钩子就是在某个阶段给你一个做某些处理的机会.

在网上找了一个很完美的图示:
vue mvvm模板定义与vue生命周期_第2张图片
beforeCreate( 创建前 ):
创建前,基本没用

created ( 创建后 )
所有的方法,实例,数据已经初始化完成,除了挂载点。
可以这里发ajax请求,但是这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成

beforeMount(挂载点前被调用)
data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上

mounted(挂载点完成)
渲染到HTML页面中,此时一般可以做一些ajax操作

beforeUpdate
在数据更新之前被调用,基本没有用

updated(更新后)
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作

beforeDestrioy (销毁前)
这一步还可以用this来获取实例,
一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

destroyed(销毁后)
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

你可能感兴趣的:(前端)