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

This article mainly explains "what are the Vue interview questions". The explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what Vue interview questions are there.

What is MVVM?

MVVM is the abbreviation of Model-View-ViewModel. MVVM is a kind of design idea. The Model layer represents the data model, and the business logic for data modification and operation can also be defined in Model; View represents the UI component, which is responsible for transforming the data model into UI presentation, and ViewModel is an object that synchronizes View and Model.

Under the MVVM architecture, View and Model do not have a direct connection, but interact through ViewModel. The interaction between Model and ViewModel is bi-directional, so the changes in View data will be synchronized to Model, and the changes in Model data will be immediately reflected on View.

ViewModel connects the View layer to the Model layer through two-way data binding, while View

Synchronization with Model is completely automatic without human intervention, so developers only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data state, and complex data state maintenance is completely managed by MVVM.

Second, the difference between mvvm and mvc? What is the difference between it and other jquery? Which scenarios are suitable?

There is not much difference between mvc and mvvm. It's all a design idea. The main reason is that Controller in mvc has evolved into viewModel in mvvm. Mvvm mainly solves the problem that a large number of DOM operations in mvc reduce the performance of page rendering, slow down the loading speed, and affect the user experience.

Difference: vue data driven, using data to display view layers rather than node operations.

Scenarios: scenarios with more data operations are more convenient

What are the advantages of vue?

Low coupling. Views (View) can be changed and modified independently of Model, a ViewModel can be bound to different "View", Model can not change when View changes, and View can not change when Model changes.

Reusability. You can put some view logic in a ViewModel and let many view reuse this view logic.

Independent development. Developers can focus on business logic and data development (ViewModel), and designers can focus on page design.

Testable. Interfaces have always been difficult to test, but now tests can be written for ViewModel.

IV. Value transfer between components?

Parent and child components pass values

The parent component passes the value through the definition on the label

The subcomponent receives data through the props method

The child component passes data to the parent component

The subcomponent passes parameters through the $emit method

Fifth, jump between routes

Declarative (label jump) programming (js jump)

6. How to use custom components in vue.cli? Have you encountered any problems?

Step 1: create your component file (indexPage.vue) in the components directory, and script must export default {}

Step 2: import: import indexPage from'@ / components/indexPage.vue' in the required page (component)

Step 3: inject into the components attribute of the child component of vue, components: {indexPage}

Step 4: use in the template view view

For example, there is an indexPage name, and when using it, it is index-page.

7. How to realize demand loading and Webpack setting in vue

Require.ensure () is provided in Webpack to load on demand. In the past, routing was introduced through the way of import, which was changed to the way defined by const.

Introduction method without page on-demand loading: import home from'.. / common/home.vue'

Introduction of page on-demand loading: const home = r = > require.ensure ([], () = > r (require ('.. /.. / common/home.vue')

8. Related to vuex interview

(1) what is vuex? How do I use it? Which functional scenario uses it?

State management in the vue framework. Introduce store into main.js and inject it. Create a new directory store, … .. Export . The scenarios are: the state between components in a single-page application. Music playback, login status, join shopping cart

(2) what are the attributes of vuex?

There are five kinds, namely State, Getter, Mutation, Action and Module

State characteristics of vuex

A, Vuex is a warehouse, there are many objects in the warehouse. Where state is the place where the data source is stored, corresponding to the data in the general Vue object.

The data stored in B and state is responsive. The Vue component reads the data from the store. If the data in the store changes, the components that depend on this data will also be updated.

C. it maps the global state and getters to the computed calculation properties of the current component through mapState

Getter characteristics of vuex

An and getters can calculate State, which is the computing attribute of Store.

B. although calculation properties can also be done within components, getters can be reused among multiple components

C. If a state is only used in one component, you can use getters.

Mutation characteristics of vuex

Action is similar to mutation, except that Action submits a mutation rather than directly changing state; Action can contain any asynchronous operation.

(3) what problems will it bring if I don't use Vuex?

Maintainability will decline, and there are three places to maintain if you want to modify the data.

Readability decreases because the data in a component can't tell where it came from.

Increasing coupling and a large number of uploads and distributions will greatly increase the coupling. Originally, Vue uses Component to reduce coupling, but now it is used this way, contrary to the original intention of componentization.

IX. Similarities and differences between v-show and v-if instructions

The v-show directive is to show or hide an element by modifying its CSS attribute of display.

The v-if instruction is to directly destroy and rebuild the DOM to achieve the effect of letting elements be shown and hidden.

Using v-show makes more performance savings; it makes more sense to use v-if when you only need to show or hide it once.

10. How to make CSS work only in the current component

Modify the current component to

Eleventh, what is the function?

When you wrap a dynamic component, inactive component instances are cached, mainly to preserve the component state or to avoid re-rendering.

12. What are the steps for introducing components into Vue?

1) using import of ES6. From... Syntax or the require () method of CommonJS introduces the component

2) register the component with the following code

/ / register Vue.component ('my-component', {template:'

A custom component!

'})

3) use components

Thank you for your reading, the above is the content of "what are the Vue interview questions". After the study of this article, I believe you have a deeper understanding of what Vue interview questions there are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.