Vue basis

V – if and v – show

V-if controls whether dom nodes exist, higher switching consumption, lazy (initial condition is false do nothing), there is a local compilation and unloading process V-show controls CSS :display, higher initial consumption switching frequently with V-show, when the condition changes very little with V-if

V – for the key role

Key must be used, and cannot be index or random. In diFF algorithm, tag and key are used to determine whether the node is the same. Key can reduce the rendering times and improve the rendering performance of DIFF algorithm.

Component communication

  • Parent components: props and this.$emit
  • Non-parent component: custom event event.emit triggers, event.on binds /event.$off destroys
  • vuex

Component life cycle

  • Mount the stage

    • BeforeCreate: $EL and data are not initialized
    • Created: $EL Uninitialized Data initialization
    • BeforeMount: $EL and data are initialized and not mounted
    • Mounted: Mounted

  • Update the stage

    • beforeUpdate
    • updated

  • Destruction of phase

  • beforeDestroy

  • destroyed

Parent-child component lifecycle sequence

  • Mount phase: Parent created – Child created – child Mounted – Parent Mounted
  • Update phase: parent beforeUpdate – child beforeUpdate – child updated – parent updated

How does a component pull out the common logic — the mixin

Mixins faults:

  • The source of variables is not clear, which is not conducive to reading
  • Multiple mixins can cause naming conflicts
  • Mixins and components can have many-to-many relationships that cause confusion

Dynamically register global components

Core: use the require.context() method to obtain the path of all vUE files in the folder

How do I obtain the latest DOM after the Vue component is updated

Vue is asynchronous rendering. After data modification, the DOM will not be modified immediately. Instead, the DOM will be updated once after integrating the results of multiple changes.

Routing principle

  • Hash routing: window.onHashChange event
  • PushState event, window. onpopState event (forward/backward)

The history route needs to be supported by the server (the main file, index.html, is returned regardless of the URL)

Why is data a function?

A vUE component is defined as a Class Class. If data is not a function, the data of each instance of vue is the same and affects each other. Data is a function that, when instantiated, forms a closure, and the data of different instances does not interact with each other.

In which lifecycle are Ajax requests placed?

Mounted, and then request data, rendering data. Since js is single-threaded, ajax gets the data asynchronously. It is useless to put the data before Mounted (even if you get the data first and the page is not rendered, the data is still in the asynchronous queue), which only makes the logic more confusing.

Note: If the parent component requests data from the interface and needs to pass it to the child component, the request needs to be put in the created. Because the life cycle of parent and child components is executed in the following order: parent created- child craeted- child Mounted – parent Mounted.

Vue Common performance optimization methods

  • Use V-show and V-IF wisely
  • Rational Use of Computed
  • V-for plus key, avoid using it with V-if
  • Custom event, DOM event timely destruction (memory leak)
  • Use asynchronous components (large third-party components) wisely
  • Use keep-alive wisely
  • The data level should not be too deep (reactive listening once will listen to the lowest level)

Describe a DOM structure in vNode

<div class="container">
    <p>vdom</p>
</div>

{
    tag: 'div',
    props: {
        className: 'container'
    },
    children: [
        {
            tag: 'p',
            children: 'vdom'
        }
    ]
}
Copy the code

When you need to use beforeDestroy

  • Unbind the custom event event.$off

  • Clearing timer

  • Unbind custom DOM events, such as window.onScroll

Vue principle

Vue working mechanism

MVVM

The core is the ViewModel, which acts as a bridge between the two directions.

  1. Model -> View Data Binding (Directives)
  2. View -> Model Dom events

Response principle

Vue2

With object.defineProperty, the get and set of each property in the data are redefined (data hijacking) so that you can listen for changes to the property. The dependency collector collects dependencies (Watcher) on get and notifies the corresponding dependencies to update on set.

Disadvantages:

  • Deep monitoring, need to recurse to the end, one-time calculation is large
  • Unable to listen for new property, delete property (vue.set vue.delete resolved)
  • Cannot listen for array changes natively, needs special treatment

Vue3

Data hijacking using Proxy.

Advantages:

  • The data attribute responds to the level accessed
  • You can listen for changes in objects and arrays

Disadvantages: Poor compatibility, cannot polyfill

Object.defineproperty cannot listen for array changes. Why can Vue2?

Vue overwrites the stereotype chain of the array property in data so that it is equal to the stereotype of Vue’s custom array class. When you access the array property’s method, you actually call Vue’s custom array method, and here you perform a view update method to listen for array changes.

Principle of v-Model bidirectional binding

Model to view: The value property of the input box is set to a property in the data

View-to-model: Use the @input event of the input box to trigger the input event when the input box changes, and set the value of the property bound to the input box in data to the event.target.value of the current input box. Since data is reactive, places that rely on the data attribute are automatically updated.

Template compilation

An overview of the

Dependency collection is implemented through template compilation, so that views are linked to models, and views are updated based on dependencies when models change.

Compile template contents into Js code, first into render function, then into vNode.

Component render/update process

  1. Parse the template, generate the render function, execute the render function, trigger the getters in data, and collect dependencies. (Which variable is used in the template, use a wather to see)
  2. Change the value of a property in data, trigger its setter method, notify the corresponding watcher of the update, and call render again

First rendering process

  1. Parse the template as the render function
  2. Trigger responses that listen for getters and setters for the data property
  3. Execute render function, produce Vnode, patch call patch(ele, vnode), generate DOM

The update process

  1. Modify data to trigger the setter (previously listened for in the getter)
  2. Notify Watcher of the update, re-call render, and generate newVnode
  3. Patch, call patch(vnode, newVnode), and generate the final DOM

Asynchronous rendering

  • $nextTick fires a callback after dom rendering
  • Summarize the data changes and update the view once
  • Reduce DOM operations and improve performance