preface

This series of articles has sorted out the frequently appearing Vue related interview questions and provided detailed answers. The difficulty can be divided into three types: simple, medium and difficult. You can test your Vue level without looking at the answer.

1 The difference between MVC and MVVM

MVC

MVC full name is Model View Controller, is the abbreviation of Model – View – Controller, a Model of software design

  • Model: Is the part of the application that handles the application’s data logic. Typically, model objects are responsible for accessing data in a database
  • View: Is the part of the application that handles the display of data. Views are usually created from model data
  • Controller: Is the part of the application that handles user interaction. Typically the controller is responsible for reading data from the view, controlling user input, and sending data to the model

The idea of MVC is that the Controller is responsible for displaying the Model’s data in the View. In other words, the Controller assigns the Model’s data to the View.

MVVM

The VM class is added to MVVM

  • The ViewModel layer: it does two things to achieve bidirectional binding of data. One is to convert the [model] into the [view], which is to convert the data passed by the back end into the page to be seen. This is done by data binding. The second is to transform [view] into [model], that is, to see the page into back-end data. This is done by DOM event listening.

The biggest difference between MVVM and MVC is: It realizes automatic synchronization between View and Model, that is, when the Model property changes, we no longer need to manually manipulate Dom elements to change the display of View, but after changing the property, the corresponding View layer display will automatically change (corresponding to the Vue data-driven idea).

Overall, MVVM is much simpler than MVC. It not only simplifies business and interface dependencies, but also solves the problem of frequent data updates, eliminating the need to manipulate DOM elements with selectors. Because in MVVM, the View is unaware of the Existence of the Model, and the Model and ViewModel cannot observe the View, this low-coupling pattern improves code reusability

Note: Vue does not follow MVVM’s ideas exactly as the official website explains

So why is it official to say that Vue doesn’t fully follow MVVM?

  • The strict MVVM requirement that the View not communicate directly with the Model is violated by the $refs attribute, which allows the Model to manipulate the View directly, so Vue is not fully compliant with MVVM.

2 Why is data a function

The data in the component is written as a function, and the data is defined as the return value of the function. In this way, each time the component is reused, a new data is returned, similar to creating a private data space for each component instance and letting each component instance maintain its own data. However, simply writing in object form makes all component instances share a copy of data, which will cause a result that all changes will change

3 What are the communication modes of Vue components

  1. The props and EMIT parent components pass data to the child components via prop, the child components pass data to the parent components via PROP, the child components pass data to the parent components via prop, and the emit parent components pass data to the child components via prop, The child component passes data to the parent component by emitting an event

  2. The parent, the parent, the parent and children takes the current components of the parent component and the current component child components

  3. Attrs and listeners A->B->C Vue 2.4 starts with attrs and attrs and attrs and Listeners to address this problem

  4. Variables are provided by provide in the parent component and injected by inject in the child component. (Officially not recommended for use in real business, but commonly used when writing component libraries)

  5. $refs gets the component instance

  6. The envetBus sibling can use the event bus approach for data transfer in this case

  7. Vuex status management

4 What are the lifecycle methods of Vue

BeforeCreate is called after instance initialization and before data Observer and Event/Watcher event configuration. In the current phase, data and methods on Data, methods, computed, and Watch cannot be accessed

Called after the created instance has been created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. There’s no EL, so if you really want to interact with the Dom, you can use vm.el, if you really want to interact with the Dom, you can use vm.el, if you really want to interact with the Dom, you can access the Dom through vm.nextTick

BeforeMount is called before the mount begins: the associated render function is called for the first time.

Mounted Occurs after the Dom is mounted. In this stage, the REAL Dom is mounted, data is bound, and Dom nodes can be accessed

BeforeUpdate is called when data is updated and occurs before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering

Updated occurs after the update is complete, and the component Dom is updated in the current phase. Care should be taken to avoid changing the data during this time, as this may result in an infinite loop of updates, and the hook is not called during server-side rendering.

BeforeDestroy Called before instance destruction. At this step, the instance is still fully available. This is where we can clean up the mess, like clearing timers.

Called after the Destroyed Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed. This hook is not called during server-side rendering.

Activated keep-alive Is used when the component is activated

Deactivated keep-alive Is exclusive and is invoked when a component is destroyed

At what stage is the asynchronous request initiated?

Asynchronous requests can be made in hook functions created, beforeMount, and Mounted because in these three hook functions data is already created and can be assigned to the data returned by the server.

If an asynchronous request does not need to rely on Dom, it is recommended to call an asynchronous request in a Created hook function, because calling an asynchronous request in a Created hook function has the following advantages:

  • The server data can be obtained faster, reducing page loading time.
  • SSR does not support beforeMount and Mounted hook functions, so creating helps consistency.

5 Differences between V-IF and V-show

V-if is converted to a ternary expression during compilation, and the node is not rendered if the condition is not met.

V-show will be compiled into instructions, control style will hide the corresponding node if the condition is not met (display:none)

Usage scenarios

V-if is suitable for scenarios where conditions are rarely changed at run time and do not need to be switched frequently

V-show is suitable for scenarios that require very frequent switching of conditions

Opacity :none, opacity: hidden, and opacity:0

Talk about vUE built-in instructions

7 How to understand one-way data flow of Vue

Data is always passed from the parent to the child. The child has no right to modify the data passed by the parent, but can only request the parent to modify the original data. This prevents accidental changes in the state of the parent component from the child, which can make the data flow of your application difficult to understand.

Note: the development environment will warn against using a v-model to bind prop passed by the parent component directly to the child component

If you really want to change the prop value of the parent component, you can define a variable in data and initialize it with the prop value and then use $emit to notify the parent component to modify it

8 Differences between computed and Watch and application scenarios

Computed is a computed property that relies on other properties to compute values, and computed values are cached and return only when computed values change. It can set getters and setters.

Watch listens for a change in the value and executes a callback, in which logical operations can be performed.

Computed attributes are usually used in template rendering, where a value is computed depending on other responsive objects or even computed attributes; The listening attribute is suitable for observing changes in a value to complete a complex piece of business logic

9 Why not use v-IF and V-for together

Do not use v-for and V-if in the same tag, because v-for is resolved before V-if. If you need to use it at the same time, you can consider writing it in the way of calculating attributes.

To summarize

Prepare carefully before the interview. The knowledge points and principles written on the resume should be well prepared. Think about the difficulties and highlights in the project, which is the difference between the interview and others.

There is also to show their modesty and studious, as well as for the future continued to advance the planning, enterprises hire more stable people.

Everything is difficult at the beginning, but programmers this way after a few years of development space is still very large, everything is important to adhere to.

In order to help you better and more efficient preparation for the interview, the electronic draft of “Front-end Engineer Interview Manual” is specially organized.

Front end test summary

JavaScript

performance

linux

Front-end data summary

The full PDF is free to share, just like it,Just click here and get it for free.

The job gap for front-end engineers has been very large, and fewer and fewer people meet the job requirements, so the partners who learn front-end should pay attention to it. They must learn solid skills and do valuable projects, so that no matter what situation they encounter when looking for a job, the problem will not be big.