vue八大生命周期的常用操作,vue组件的生命周期函数

　　本文主要介绍了对Vue组件生命周期运行原理的分析，并通过实例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。

　　Vue实例有一个完整的生命周期，从创建、初始化数据、编译模板、挂入DOM、渲染-更新-渲染、卸载等一系列过程。我们成为Vue实例的生命周期，钩子就是给你一个机会，在某个阶段做一些处理。

　　beforeCreate( 创建前 )

　　实例初始化后，之前调用数据观察和事件配置。此时组件的option对象还没有创建，el和data还没有初始化，所以methods、data、computed等上的methods和data。无法访问。

　　created ( 创建后 ）

　　创建实例后，调用它。在这一步中，实例已经完成了以下配置：数据观察、属性和方法操作、watch/事件回调、数据初始化，而el还没有。但是，挂起阶段还没有开始，$el属性目前是不可见的。这是一个常见的生命周期，因为你可以调用方法中的方法，更改数据中的数据，修改可以通过vue的响应式绑定反映到页面上，在computed中获取计算属性等。通常我们可以在这里对实例进行预处理，有些童鞋喜欢在这里发送ajax请求。值得注意的是，在这个循环中没有办法拦截实例化过程。因此，如果在允许进入页面之前必须获得一些数据，则不适合用这种方法发送请求。建议在组件路由钩子beforeRouteEnter中完成。

　　beforeMount

　　在开始挂之前调用，第一次调用了相关的render函数(虚拟DOM)。实例完成了以下配置：编译模板，从data中的数据和模板生成html，完成el和data的初始化。注意，此时它还没有挂在html页面上。

　　mounted

　　挂完了，也就是把模板中的HTML渲染成HTML页面，这个时候一般可以做一些ajax操作，mounted只会执行一次。

　　beforeUpdate

　　在数据更新之前调用，这发生在虚拟DOM重新呈现和修补之前。可以在这个钩子中进一步改变状态，而不触发额外的重新呈现。

　　updated（更新后）

　　当虚拟DOM由于数据变化而被重新渲染和修补时；它只会被调用；当被调用时；组件DOM已经更新；因此您可以执行依赖于DOM的操作；然后；大多数情况下；您应该避免在此期间更改状态；因为这可能导致更新的无限循环；并且在服务器端渲染过程中不会调用钩子。

　　beforeDestroy（销毁前）

　　在实例销毁之前调用，并且实例仍然完全可用，

　　在这一步中，您还可以使用它来获取实例，

　　一般来说，一些重置操作是在这一步完成的，比如清除组件中的定时器和dom事件。

　　destroyed（销毁后）

　　在实例被销毁后调用。调用后，所有事件侦听器都将被移除，所有子实例都将被销毁。在服务器端渲染过程中不会调用这个钩子。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。