Vue instance process from creation to destruction, Vue is the life cycle, that is, from the beginning of creation, initialization data, compiled templates, mount DOM, update, uninstall and a series of processes. In this process we will run some function called lifecycle hook.
Template compilation: converting the contents into a real template HTML code.
- beforeCreate: Creating ago. After a new vue example, only some of the default lifecycle hooks and default events, other things have not created. At this time, data, methods and DOM elements are not accessible.
- created: it was created. Examples have been created. data, methods can be accessed, but still can not access the DOM elements.
- beforeMount: front mount. In memory has compiled a template, but have not mounted to the page. Not visit specific DOM element
- Once mounted: mounted. DOM elements can be accessed.
- beforeUpdate: before updating. The data is the latest data, but has not yet resumed render a DOM node, the data show pages or old.
- updated: after the update. DOM data and data have completed the update.
- beforeDestroy: before destruction. In this step, the instance is still fully available.
- destroyed: after the destruction. Everything will Vue instance is unbound.
Call interface, the function on the created / beforeMount / mounted can, in general on the created, but if you want to operate dom, then it needs to be placed in mounted.
The life cycle of this hook point to call its context Vue instance.
Do not use the arrows on the Options function or callback properties, such as created:. () => Console.log (this.a) or vm $ watch ( 'a', newValue => this.myMethod ()). Because the arrow function does not this, this will always look as lexical scope variables to their superiors, until you find, often resulting in Uncaught TypeError: Can not read property of undefined or Uncaught TypeError: this.myMethod error not a function of the class is.
