vue钩子函数和生命周期（vue生命周期常用的四个钩子函数）

大家好，我是讯享网，很高兴认识大家。

 <p style="text-align: center"><img alt="" height="100" src="https://img-blog.csdnimg.cn/.png" width="1000"></p>

讯享网

通俗说就是Vue实例从创建到销毁的过程，就是生命周期

组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

讯享网

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

讯享网

component 和keep-alive【component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件】

闭合标签使用组件

1、component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

keep-alive : keep: 保持 alive:活力

keep-alive : keep: 保持 alive:活力
<keep-alive>
keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建
<component v-bind:is=“one”> //如果是动态属性，那么会去data中取值
</keep-alive>

当keep-alive 缓存组件才会有的生命周期的钩子函数
activated deactivated
errorCaptured 当子孙组件出错时，会调用这个钩子函数

讯享网

 本文参考文章：宅男呀的Vue生命周期（11个钩子函数）

vue钩子函数和生命周期（vue生命周期常用的四个钩子函数）

相关推荐