Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you what interview questions vue has, I hope you have something to gain after reading this article, let's discuss it together!

What is the MVVM framework?

ue is an mvvm framework that implements bidirectional data binding, updating the model layer when the view changes, and updating the view layer when the model layer changes. In vue, two-way binding technology is used, that is, changes in View can make Model change in real time, and changes in Model can also be updated to View in real time.

II. Vue Life Cycle

beforeCreate $elrenderhtmlel content replaces html pointed to by el attribute Called before data update, occurs in virtual

updated The virtual DOM due to data changes has been updated, so you can perform dependent

beforeDestroy Vue principle of realizing bidirectional binding of data

Subscriber mode, pass setter object to Vue instance as its Object.defineProperty converts them into Vue vue data bi-directional binding as the entry of data binding, integrates Observer, Observer to parse compiled template instructions (vue is used to parse the bi-directional binding effect of setting up observer and input changes.

1. Parent component and child component pass values;

eventBus is to create an event center, which is equivalent to a relay station, which can be used to transmit events and receive events. The project is relatively small, and this is more suitable. (Although many people recommend direct use.)

undefinedundefinedundefinedundefined

What do v-show and v-if instructions have in common and differ from each other?

When v-if is used with v-for, v-for has a higher priority than v-if, which means v-if will run repeatedly in each v-for loop. Therefore, it is not recommended to use v-if and v-for together.

If v-if and v-for are used together, the in vue automatically indicates that v-if should be placed outside.

undefinedundefinedundefinedundefined

How do I get dom?

ref="domName" Usage: this.$ refs.domName

undefinedundefinedundefinedundefined

8. Name the instructions in several kinds of vue and their usage?

v-model bidirectional data binding;

v-for loop;

v-if v-show Show and hide;

v-on event;v-once: bind only once.

undefinedundefinedundefinedundefined

9 What is a Vue-loader? What is the purpose of using it?

A loader for vue files that converts template/js/style to js modules.

Usage: js can write es6, style style can be scss or less, template can add jade, etc.

undefinedundefinedundefinedundefined

X. Use of v-modal

v-model is used for two-way binding of form data. In fact, it is a syntax sugar. Two operations are done behind this:

v-bind binds a value attribute;

The v-on directive binds the input event to the current element.

undefinedundefinedundefinedundefined

XI. Briefly describe the use scenarios of computed and watch respectively

computed:

Computed is used when an attribute is affected by multiple attributes

The most typical chestnut: shopping cart goods settlement time

watch:

When one piece of data affects multiple pieces of data, watch is needed.

Chestnut: Search data

undefinedundefinedundefinedundefined

How is bi-directional data binding implemented in Vue?

vue bidirectional data binding is realized through data hijacking combined with publish subscription mode, that is, data and view synchronization, data changes, view changes, data changes;

Core: About VUE bidirectional data binding, the core is Object.defineProperty() method.

undefinedundefinedundefinedundefined

Thirteen, single-page application and multi-page application differences and advantages and disadvantages

A single page application (SPA) is an application that has only one main page, and the browser loads all the necessary html, js, and css at the beginning. All of the content is contained in this so-called main page. However, when writing, it will still be written separately (page fragments), and then dynamically loaded by the routing program during interaction. The page jump of a single page will refresh only local resources. It is mostly used on PC.

Multi-page (MPA) means that there are multiple pages in an application, and the page is refreshed when the page jumps.

Advantages of a single page:

User experience is good, fast, content changes do not need to reload the entire page, based on this spa less pressure on the server; front and back separation; page effects will be cool (such as special animation when switching page content).

Single page disadvantages:

Not conducive to seo; navigation is not available, if you must navigate need to achieve their own forward, backward. (Since it is a single page, you cannot use the browser's forward and backward functions, so you need to establish your own stack management); it takes a lot of time to load for the first time; the complexity of the page increases a lot.

undefinedundefinedundefinedundefined

Priority of v-if and v-for

When v-if is used with v-for, v-for has a higher priority than v-if, which means v-if will run repeatedly in each v-for loop. Therefore, it is not recommended to use v-if and v-for together.

If v-if and v-for are used together, the in vue automatically indicates that v-if should be placed outside.

undefinedundefinedundefinedundefined

The difference between assets and static

The same point: assets and static are both static resource files. All the required resource files, images, font icons, style files, etc. can be placed under these two files. This is the same point.

Different points: static resource files stored in assets will be packaged and uploaded when the project is packaged, that is, when npm run build is run. The so-called packaging simple point can be understood as compressing volume and formatting code. The compressed static resource files will eventually be placed in static files and uploaded to the server along with index.html. Static resource files placed in static do not have to go through the process of packaging, compression and formatting, but directly enter the packaged directory and upload it directly to the server. Because compression is avoided for direct upload, packaging will improve certain efficiency, but because the resource file in static is not compressed, the file size is larger than the packaged file submission in assets. It takes up more space on the server.

undefinedundefinedundefinedundefined

16. Common modifiers of vue

.stop: Equivalent to event.stopPropagation() in JavaScript, prevents event bubbling;

.prevent: equivalent to event.preventDefault() in JavaScript, prevents execution of the default behavior (if the event can be canceled, cancel the event without stopping further propagation of the event);

.capture: event capture from outside to inside as opposed to bubbling;

.self: only triggers events within its scope, no child elements;

.once: only triggers once.

undefinedundefinedundefinedundefined

17. vue-cli How to add custom instructions?

2. global instruction

undefinedundefinedundefinedundefined

How do I customize a filter?

JS code: The value of (msg) as the first parameter.

undefinedundefinedundefinedundefined

19. Hook function of vue route

Home page can control navigation jump, titlebeforeEachfrom: from: next:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.