vue component lifecycle Comments

Vue instance has a full life cycle, that is to say from the beginning of creation, initialization data, compiled templates, hanging in the DOM, rendering - Update - rendering, and a series of unloading process, we become life cycle Vue instance, it is in a hook stage to give you a chance to do some processing. Vue is carrying a front end frame assembly system. Each instance Vue is actually a component, we are in fact in a given tissue when a component in the structure of our page, and then bolted together to complete a complex page logic.
The main assembly comprises: a data template, and the status of the link data and the template response system.

 

 

 

beforeCreate (created before)

After initialization instance, was called before the observed data and event configuration options object components at this time not yet created, el and data not initialized, and therefore can not access methods and data on methods, data, computed and so on.

created (was created)

It was called after instance has been created, in this step, the instance has completed the following configuration: operational data observation, properties and methods, watch / event callback event, completed the initialization data data, el no. However, hanging on stage has not yet begun, $ el property is not currently visible, this is a common life-cycle, because the method of methods you can call, change the data in the data, and can be modified by the response bindings reflect vue on page ,, obtaining property computed in the calculation and so on, we can usually instances where pre-treatment, there are some shoes like ajax request made here, it is worth noting that this cycle is no way to for instance process for blocking, so if there are some data must be acquired before allowing access to the page, it is not suitable in this method of retransmission request, recommended route complete assembly of the hook beforeRouteEnter

beforeMount

Hanging were called before the start of the relevant render function is called for the first time (virtual DOM), has completed the following configuration examples: Compile template, the data inside the data and templates to generate html, finished el and data initialization, pay attention at this time do not hang onto the html page.

mounted

挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。

beforeUpdate

在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程

updated(更新后)

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

beforeDestrioy (销毁前)

在实例销毁之前调用,实例仍然完全可用,

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

destroyed(销毁后)

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

钩子函数

 

vue生命周期源码中的钩子函数,命名以后 就回调 相当于重写

 

 

Guess you like

Origin www.cnblogs.com/guonng/p/12155838.html