Close read Vue official documentation series 🎉

Create an instance

const vm = newVue({... })Copy the code

All Vue components are instances of Vue, and instances created with new Vue() are the “root instances” of Vue.

Instance properties, data, and methods

data

Only members added to the data object at instance creation time are added to the Vue’s reactive system as reactive values.

A change in a reactive value triggers the view to be rerendered.

These reactive values can be accessed and modified using the vm[propertyName] format.

let data = {n:'a'};
const vm = new Vue({data});

vm.a; //'a'
vm.a = 'b'.console.log(data.a); // 'b';
Copy the code

New members of an instance’s data attribute will not be converted to reactive variables by Vue in the following cases:

  1. Dynamic direction after Vue instance creationdataAttribute Indicates the attribute of the member to be added.
  2. beObject.freeze()Frozen member attributes.

Properties and Methods

In addition to directly accessing reactive data defined in data objects through Vue instance objects, Vue instances expose other useful “properties” and “methods.”

The names of these methods and properties are prefixed with $to distinguish them from user-defined properties.

*vm.$data: Gets responsive data in a responsive system. *vm.$props: The props object received by the current component instance. $el: The root DOM element used by the Vue instance. *vm.$watch: Observe a change in the evaluation result of an expression or function on a Vue instance.

Vm.$watch can only monitor reactive data on previous instances.

The life cycle

The “life cycle” is the different stages of the initialization process for each Vue instance after creation. For example: data listening, compiling templates, mounting instances to the DOM and updating the DOM as data changes, and so on.

Lifecycle hooks are functions that provide callbacks at different stages of the initialization process, giving users the opportunity to add their own code at different stages.

It is important to note that life cycle functions cannot use arrow functions in case context objects are not retrieved correctly.

created

Before the Created Life Cycle, the Vue instance has already gone through “Create (New Vue())” ->” Initialize events and Life Cycle “-> “beforeCreate” ->” initialize dependency injection and responsive data “.

The Created lifecycle is characterized by the following:

1. Called immediately after the instance is created, the call time is just later than beforeCreated, but it is also very early. 2. Reactive data can be used. 3. Complete Vue instances can be obtained. For example, event and response data cannot be used in the beforeCreate life cycle. 4. The mount phase has not started yet, so the $EL attribute is not currently available.

beforeMount

Called before the mount begins, the associated Render function is called for the first time to start generating the virtual DOM. Vm.$el is still the DOM passed in when the instance is created, for example, usually #app.

mounted

Called after the instance is mounted. The EL is replaced by the newly created vm.$el (usually the root element in app.vue).

When the life hook fires, the DOM is already mounted into the document.

Mounted does not ensure that all child components are mounted together. If you want to wait until the entire view is rendered, use vm.$nextTick inside Mounted

new Vue({
    mounted(){
        this.$nextTick(function(){
            / /...}); }})Copy the code

beforeUpdate

Called when data is updated. This occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.

updated

When this lifecycle hook is called, it indicates that the virtual DOM re-rendering and patching caused by the data changes has been completed, and that the component’s new DOM has been updated to allow dom-dependent operations to be performed.

In most cases, however, you should avoid changing status in the meantime. If you want to change state accordingly, it is usually best to use computed properties or Watcher instead. Updated does not guarantee that all child components will also be redrawn together. If you want to wait until the entire view is redrawn, use vm.$nextTick in its updated

destroyed

Called when instances of a component and all its children have been destroyed. The difference with beforeDestory is that component instances can also be retrieved in beforeDestory.

Life cycle diagram

Here is the official Vue instance lifecycle flowchart: