Arrangement of knowledge points of Vue front-end interview questions

Time:2021-11-29

1. Talk about the principle of Vue’s two-way data binding

Vue implements two-way data binding mainly by means of data hijacking combined with publisher subscriber mode, hijacking setters and getters of various properties through object. Defineproperty(), publishing messages to subscribers when data changes, and triggering corresponding listening callbacks

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            Console.log ('I got it ')
            return val;
        },
        set: function (newVal) {
            Console.log ('I'm set ')
        }
})
obj.name = 'fei';// When setting the name attribute to obj, the set method is triggered
var val = obj.name;// When the name attribute of obj is obtained, the get method will be triggered

It has been learned that Vue does data binding through data hijacking, and the core method is to hijack properties through object. Defineproperty(). When setting or obtaining, we can use other trigger functions in get or set methods to monitor data changes. Undoubtedly, this method is the most important method in this paper One of the most basic contents.

2. Explain one-way data flow and two-way data binding

Unidirectional data flow: as the name suggests, data flow is unidirectional. The data flow direction can be tracked, the flow is single, and the problem can be traced more quickly. The disadvantage is that it is not convenient to write. To change the UI, you must create various actions to maintain the corresponding state
Bidirectional data binding: data is interlinked, and the operation of data change is hidden within the framework. The advantage is that in the scenario of more form interaction, a large number of code irrelevant to business will be simplified. The disadvantage is that the change of local state cannot be tracked, which increases the difficulty of debugging in case of error

3. How does Vue remove ‘#’ from URL

By default, the Vue router uses the hash mode, so when the route is loaded, the URL in the project will come with #. If you don’t want to use #, you can use history, another mode of Vue router

new Router({
  mode: 'history',
  routes: [ ]
})

It should be noted that when we enable the history mode, because our project is a single page application, when the route jumps, 404 occurs due to the lack of access to static resources. At this time, the server needs to add a candidate resource covering all situations: if the URL does not match any static resources, You should return to the same index.html page

4. Understanding of MVC and MVVM

MVC

Arrangement of knowledge points of Vue front-end interview questions

characteristic:

1. View sends instructions to the controller
2. After the controller completes the business logic, it requires the model to change the status
3. The model sends new data to the view, and the user gets feedback

MVVM

Arrangement of knowledge points of Vue front-end interview questions

All communications are unidirectional
characteristic:

1. The communication between each part is bidirectional
2. Two way binding: changes in the view are automatically reflected in the ViewModel, and vice versa
Please move for detailshere

5. Introduce virtual DOM

Refer here

6. Understanding of Vue life cycle

Vue instances have a complete life cycle, which refers to the process from creation to destruction of an instance
1. Beforecreated() is executed between instance creation, and the data is not loaded
2. Created() can initialize data after instance creation and data loading, and execute before DOM rendering
3. Beforemount() virtual DOM has been created and the data is changed for the last time before data rendering
4. The mounted () page and data are rendered, and the real DOM is mounted
5. Triggered before beforeupadate() re renders
6. The updated () data has been changed and the DOM has been re rendered. The changed data will fall into an endless loop
7. Beforedestruction() and destroyed(), the former is executed before destruction (the instance is still fully available), and the latter is executed after destruction

7. Component communication

Parent component communicates with child component
The child component binds the parent component data through the props attribute to realize the communication between the two sides

The child component communicates with the parent component
Trigger the event of the parent component in the child component through $emit

Data transfer between non parent and child components and brother components

8. Implementation of Vue router routing

Routing is a way to interact with the back-end server. Requesting different resources through different paths and requesting different pages is one of the functions of routing

9. Difference between V-IF and v-show

When using V-IF, if the value is false, the page will not have this HTML tag generated.
V-show means that no matter whether the value is true or false, HTML elements will exist, but the display in CSS will be displayed or hidden

10. Difference between router

Router.push method
$route is the jump object of the current route, where you can get name, path, query, params, etc

11. What does nexttick do

Nexttick, you can get the updated DOM in the callback
Please refer to the official documents for detailsDeep response principle

12. Why must Vue component data be a function

Because of the characteristics of JS itself, if data is an object, because the object itself belongs to reference type, when we modify one of the properties, it will affect the data of all Vue instances. If data is used as a function to return an object, the data attributes of each instance are independent and will not affect each other

13. What is the difference between calculated attribute and event methods

We can define the same function as a method or a calculation attribute. For the final result, the two methods are the same

difference:

Computed: calculated attributes are cached based on their dependencies and will be re evaluated only when their related dependencies change
For method, whenever re rendering occurs, the method call always executes the function

17. Understanding of keep alive

keep-aliveyesVueA built-in component that can keep the contained components in the state or avoid re rendering

<keep-alive>
  <component>
    <!--  This component will be cached! -- >
  </component>
</keep-alive>

You can use props provided by API to realize dynamic caching of components

Specific referenceOfficial API

18. Role of key in Vue

keyThe special properties of are mainly used inVueVirtualDOMAlgorithm, new and oldnodesContrast time identificationVNodes。 If not usedkeyVueAn algorithm that minimizes dynamic elements and tries to repair / reuse elements of the same type as much as possible is used. usekey, it will be based onkeyChanges to rearrange the order of elements and remove themkeyElement that does not exist.

Child elements with the same parent element must have uniquekey。 RepetitivekeyWill cause rendering errors

Specific referenceOfficial API

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]