I. VUE life cycle

1.1 Life Cycle

From creation to destruction of each VUE instance,

There are eight stages: before/after creation, before/after load, before/After update, and before/after destroy

① Beforecreate (before creation)

The mount element $EL and the data object data of the vue instance are undefined and uninitialized until the instance is fully created

② Created (after created)

The data object data already exists, you can call methods in Methods to manipulate data in data, but dom is not generated, and $EL does not exist

③ Keep up with the mounting process before mounting

The vue instance’s $EL and data are initialized and were virtual DOM nodes before being mounted. The template has been edited in memory but not rendered to the page. Data.message is not replaced

④ Mounted

When the vue instance is mounted, date.message is successfully rendered, and the template in memory is actually mounted to the page. Users can see the rendered page

⑤beforeUpdate(beforeUpdate)

The beforeUpdate method is triggered when data changes, and the data has not been synchronized with the latest data

⑥ Updated

When data changes, the updated method is triggered so that the page and data data have been kept in sync

⑦beforeDestory(Before destruction)

Called before component destruction, at which point the instance is still fully available

⑧destoryed(destroyed)

Called after component destruction. Changes to data do not trigger lifecycle functions anymore. The Vue instance is unevent-listening and DOM binding, but the DOM structure remains

1.2 Briefly describe what scenarios are suitable for each cycle?

Mounted can be used for either of the following applications: beforecreate or beforecreate the loading event for a loaded instance. Mounted can be used for either of the loading events or for both of the loading events. Updated: If data is handled uniformly, write the corresponding function here. BeforeDestroy: You can make an acknowledgement box for the stop event nextTick: Dom Arguments is a pseudo-array that has no traversal interface and cannot be traversed

1.3 What is the role of the VUE life cycle?

A: It has multiple event hooks throughout its lifecycle, making it easier to form good logic when controlling the process of the entire Vue instance.

1.4 Which hooks will be triggered during the first page loading?

Answer: beforeCreate, Created, beforeMount, and Mounted are triggered the first time the page is loaded

What is the MVVM framework?

M: Data model

V: view

VM:

  • V-m: event listening
  • M-v: event binding

According to event monitoring and event binding, the synchronization of view and data can be achieved

MVVM stands for model-view-ViewModel. MVVM is a design idea. The Model layer represents the data Model, where you can also define the business logic for data modification and manipulation; A View represents the UI component that is responsible for converting the data Model into a UI presentation. A ViewModel is an object that synchronizes the View and Model.

In MVVM architecture, there is no direct connection between View and Model, but interaction through ViewModel. The interaction between Model and ViewModel is bidirectional, so the changes of View data are synchronized to Model. Changes to Model data are immediately reflected in the View.

The ViewModel connects the View layer with the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention, so developers only need to focus on business logic, do not need to manually manipulate DOM, do not need to pay attention to the synchronization of data state. Complex data state maintenance is managed entirely by MVVM.

What kinds of navigation hooks does vue-Router have?

  • Global navigation hook
Router.beforeeach (to, from, next), // Finish parsing router.beforeresolve (to, from, next), Router.aftereach (to, from)Copy the code
  • Component internal hook
// beforeRouteEnter is invoked after the component is rendered. // beforeRouteUpdate is invoked when the component is not reloaded. // The hook beforeRouteLeave is triggered when leaving the copy codeCopy the code
  • Separate routing proprietary components
// Enter the configuration of the route beforeEnterCopy the code

Vue -route Parameter transmission

Parameter transfer mode:

  1. query
  2. params

Note:

  • Params can import routes only by name, or query

  • Query is a GET request. Params is a POST request whose parameters are not displayed in the address bar

  • Named route with params, page refresh parameters will be lost

  • Query parameters with query, refresh page data will not be lost

  • To get the value of the parameter, use this.$router followed by the name of the route

Vue. Route. parmas(also route. query)

Route is a property of vue, params is a property of route, is an object, used to store data key-value pairs.

Route.params is an intermediate container used to hold parameters in route.params. It is a key-value pair, so that actions are performed on this page, parameters are passed to Route.params, and parameters are retrieved from Route.params on another page

V. Use of V-Model

  1. Application of V-Model in input dropdown, radio button, check box:

    • There is a value binding problem here. Whether it is a drop-down box or a check box, we can set V-model =’selected” in the Select TAB and value in the corresponding option TAB

  2. V-model modifiers: V-model can also be used with. Lazy. Trim and number modifiers

    • Lazy: Allows data to be updated only when it loses focus or is pulled back
    • Number: Automatically converts the data entered in the input box to the value type
    • Trim: Whitespace that can be filtered twice

The V-Model is used for bidirectional binding of form data (bidirectional binding means that data and tags are associated in a two-way way, with changes in one side and changes in the other). In fact, it is a syntax sugar that does two things:

  • V-bind: binds a value attribute

  • V-on: The directive binds the input event to the current element

Custom components using v-Models should do the following:

  • Receive a value.prop

  • Fires the input event and passes in a new value

Vi. Vue parent-child component communication

The parent component passes data to the child component via props, and the child component communicates to the parent component via $EMIT

  • The parent component passes value props to the child component

    • Props can only pass from one component to the next (parent and child components), and single data flows, and props is read-only and cannot be modified. Any changes are invalidated with warnings

  • The child component passes the value $emit to the parent

    • $EMIT binds a custom event. When the statement is executed, the arG parameter is passed to the parent component, which listens and receives the parameter via V-ON

Similarities and differences between V-show and V-IF commands

  • The V-show directive changes the displayCSS property of an element to show or hide it

  • The V-if directive destroys and reconstructs the DOM to show and hide elements

What are the advantages of VUE?

  • Low coupling. Views can be changed and modified independently of Model. A ViewModel can be bound to different “views”. The Model can remain unchanged when the View changes, and the View can remain unchanged when the Model changes.

  • Reusability. You can put some view logic in a ViewModel and have many views reuse that view logic.

  • Independent development. Developers can focus on business logic and data development (viewModels), designers can focus on page design, and Expression Blend makes it easy to design interfaces and generate XML code.

  • Can be tested. Interfaces are harder to test, and tests can now be written against the ViewModel.

What is the principle of bidirectional binding of VUE

Vue. js adopts data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listening callback.

Specific steps:

Step 1: You need to recursively traverse the Observe data object, including the property of the child property object, with setters and getters so that assigning a value to that object triggers the setter, and you can listen for data changes

Step 2: Compile parses the template instruction, replaces the variables in the template with data, and initializes the render page view, binds the corresponding node of each instruction to update function, adds the subscriber that listens to the data, receives notification once the data changes, and updates the view

Step 3: The Watcher subscriber acts as a communication bridge between the Observer and Compile. It mainly does the following:

  • Add yourself to the attribute subscriber (DEP) during self instantiation
  • There must be an update() method itself
  • If you can call your own update() method and trigger the callback bound with Compile when notified of property changes to dep.notice(), you are done.
  • Step 4: MVVM, as the entry of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor its model data changes, and uses Compile to parse and Compile template instructions. Finally, Watcher is used to build a communication bridge between Observer and Compile to achieve data change -> view update; View Interactive Changes (INPUT) -> Bidirectional binding effect of data model changes.

X. instructions in VUE and its usage

  • V-if: determines whether to hide.

  • V-for: data loop out;

  • V-bind :class: to bind a property;

  • V-model: implements bidirectional binding

Why must data return a function

The data in the component is written as a function. The data is defined as the return value of the function, so that each time the component is reused, a new copy is returned

If data is simply written in object form, all component instances share a copy of data, resulting in data pollution

How many vue-router routing modes are there?

Vue-router has three routing modes: hash, history, and Abstract

Router is a large routing object that comes out of new

Route is the active route