1. What is MVVM?
MVVM is an acronym for Model-View-ViewModel. MVVM is a design philosophy. The Model layer represents the data model, and the business logic of data modification and operation can also be defined in the Model; the View represents the UI component, which is responsible for converting the data model into a UI display, and the ViewModel is an object that synchronizes the View and the Model.
Under the MVVM architecture, there is no direct connection between View and Model, but interaction through ViewModel. The interaction between Model and ViewModel is bidirectional, so changes in View data will be synchronized to Model, while changes in Model data It will also be immediately reflected on the View.
ViewModel connects the View layer and 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 pay attention to business logic and do not need to manually manipulate DOM. It is necessary to pay attention to the synchronization of data status, and the maintenance of complex data status is completely managed by MVVM.
Second, the difference between mvvm and mvc? What is the difference between it and other frameworks (jquery)? Which scenarios are suitable?
In fact, there is not much difference between mvc and mvvm. It's all about design thinking. The main reason is that the Controller in mvc has evolved into the viewModel in mvvm. Mvvm mainly solves a large number of DOM operations in mvc, which reduces page rendering performance, slows down loading speed, and affects user experience.
Difference: Vue is data-driven, and uses data to display the view layer instead of node operations.
Scenarios: scenarios with more data operations, more convenient
3. What are the advantages of vue?
- low coupling. The View (View) can be changed and modified independently of the Model. A ViewModel can be bound to different "Views". When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged.
- reusability. You can put some view logic in a ViewModel and let many views 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.
4. Passing values between components?
- The parent component and the child component pass the value
The parent component defines the pass value through the label above
and the child component accepts data through the props method- Subcomponents pass data to parent components
Subcomponents pass parameters through the $emit method
5. Jump between routes
Declarative (label jump) Programmatic (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 the script must export default {}
- Step 2: Import in the page (component) you need: import indexPage from '@/components/indexPage.vue'
- Step 3: Inject into the components attribute of the subcomponent of vue, components:{indexPage}
- Step 4: Use it in the template view view,
for example, it is named indexPage, and when used, it is index-page
7. How does vue realize on-demand loading and webpack settings
require.ensure() is provided in webpack to achieve on-demand loading. In the past, routes were imported through import, but changed to const definition.
Import method without page loading on demand: import home from '../../common/home.vue'
Import method of page loading on demand: const home = r => require.ensure( [], () = > r (require('../../common/home.vue')))
Eight, vuex interview related
(1) What is vuex? how to use? Which functional scenarios use it?
State management in the vue framework. Introduce store and inject in main.js. Create a new directory store, ..... export. Scenarios include: state between components in a single-page application. Music playback, login status, add to cart
(2) What kinds of attributes does vuex have?
There are five types, namely State, Getter, Mutation, Action, Module
- The State feature
A of vuex, Vuex is a warehouse, and many objects are placed in the warehouse. The state is where the data source is stored, corresponding to data
B in the general Vue object, and the data stored in the state is responsive. The Vue component reads data from the store. If the data in the store changes, the components that depend on this data Update
C will also occur, which maps the global state and getters to the computed property of the current component through mapState - Vuex's Getter feature
A, getters can perform calculation operations on State, which is Store's calculation property
B, although calculation properties can also be used in components, but getters can be reused between multiple components
C, if a state is only in one It can be used in components without getters - Vuex's Mutation feature
Action is similar to mutation, the difference is: Action submits mutation instead of directly changing the state; Action can contain any asynchronous operation.
(3) What problems will arise if Vuex is not used?
- The maintainability will decrease, and there are three places to maintain if you want to modify the data;
- Readability will decrease, because the data in a component cannot be seen where it comes from;
- Increased coupling, a large number of uploads and distributions will greatly increase the coupling. Originally, Vue used Component to reduce coupling. Now it is used in this way, which is contrary to the original intention of componentization.
9. Common points and differences between v-show and v-if instructions
- The v-show command is to modify the display CSS property of the element to show or hide it
- The v-if instruction directly destroys and rebuilds the DOM to achieve the effect of showing and hiding elements
10. How to make CSS only work in the current component
Change the <style> of the current component to <style scoped>
11. What is the function of <keep-alive></keep-alive>?
<keep-alive></keep-alive> When wrapping dynamic components, inactive component instances will be cached, mainly used to preserve component state or avoid re-rendering.
12. Steps to introduce components in Vue?
1) Use the import ... from ... syntax of ES6 or the require() method of CommonJS to import components
2) Register the components, the code is as follows
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
3) Using components<my-component></my-component>
13. What is the function of command v-el?
Provide a DOM element that already exists on the page as the mount target of the Vue instance. It can be a CSS selector or an HTMLElement instance
14. Steps to use plugins in Vue
- Use the import ... from ... syntax of ES6 or the require() method of CommonJSd to import plugins
- Use the global method Vue.use( plugin ) to use the plugin, you can pass in an option object Vue.use(MyPlugin, { someOption: true })
15. Please list 3 commonly used life cycle hook functions in Vue
- created: Called after the instance has been created. At this step, the instance has completed data observation, property and method operations, and watch/event event callback. However, the mount phase has not yet started, and the $el property is not yet visible
- mounted: el is replaced by the newly created vm.$el, and this hook is called after it is mounted to the instance. If the root instance mounts an in-document element, vm.$el is also in-document when mounted is called.
- activated: called when the keep-alive component is activated
16. Active-class is an attribute of which component?
The router-link component of the vue-router module.
17. How to define the dynamic routing of vue-router and how to obtain the dynamic parameters passed in?
In the index.js file under the router directory, add /:id to the path attribute.
Use the params.id of the router object.
18. What kinds of navigation hooks does vue-router have?
Three types, one is the global navigation hook: router.beforeEach(to, from, next), function: judge and intercept before jumping.
The second type: hooks in the component;
the third type: separate routing and exclusive components
Nineteen, life cycle related interview questions
A total of 8 stages are divided into before/after creation, before/after loading, before/after update, and before/after destruction.
- Before/after creation: In the beforeCreate stage, both the mount element el and the data object data of the vue instance are undefined and have not been initialized. In the created stage, the data object data of the vue instance is available, but el is not yet.
- Before/after loading: In the beforeMount stage, the $el and data of the vue instance are initialized, but they are still virtual dom nodes before mounting, and data.message has not been replaced. In the mounted phase, the vue instance is mounted and data.message is rendered successfully.
- Before/after update: when the data changes, the beforeUpdate and updated methods will be triggered.
- Before/after destruction: After the destroy method is executed, the change to data will not trigger the periodic function, indicating that the vue instance has released the event monitoring and binding with dom at this time, but the dom structure still exists
(1), what is the vue life cycle
Answer: The process of a Vue instance from creation to destruction is the life cycle. That is, a series of processes from the beginning of creation, initialization of data, compilation of templates, mounting of Dom→rendering, update→rendering, unloading, etc. We call this the life cycle of Vue.
(2) What is the role of the vue life cycle
Answer: There are multiple event hooks in its life cycle, which makes it easier for us to form good logic when controlling the process of the entire Vue instance.
(3) There are several stages in the vue life cycle
A: It can be divided into 8 stages in total: before/after creation, before/after loading, before/after update, before/after destruction
(4) Which hooks will be triggered on the first page load
Answer: The beforeCreate, created, beforeMount, mounted hooks will be triggered when the page is loaded for the first time
(5), DOM rendering has been completed in which cycle
Answer: DOM rendering is already done in mounted.
(6) Briefly describe which scenarios each cycle is suitable for
Answer: Some usage methods of lifecycle hooks:
- beforecreate : You can add a loading event here, which is triggered when the instance is loaded
- created : The event when the initialization is completed is written here. If the loading event ends here, the asynchronous request is also suitable for calling here
- mounted : Mount the element and get the DOM node
- updated : If the data is processed uniformly, write the corresponding function here
- beforeDestroy : You can make a confirmation box to confirm the stop event
- nextTick : operate dom immediately after updating data
20. Name at least 4 commands and their usage in vue?
v-if: determine whether to hide; v-for: data loop; v-bind: class: bind an attribute; v-model: realize two-way binding
21. What is vue-loader? What are the uses for it?
A loader that parses .vue files.
Purpose: js can write es6, style can be scss or less, template can add jade, etc.
22. What is scss? What are the installation steps in vue.cli? What are the major features?
Answer: precompilation of css.
Steps to use:
Step 1: First install loader modules such as css-loader, node-loader, sass-loader
Step 2: Find webpack.base.config.js in the build directory, and add an extension .scss to the extends attribute
Step 3: In the same file, configure a module attribute
Step 4: Then add the lang attribute to the style tag of the component, for example: lang="scss"
characteristic:
- Variables can be used, for example ($variable name = value);
- Mixer can be used, e.g. ()
- can be nested
23. Why use key?
When switching between elements with the same tag name, you need to set a unique value through the key attribute to make Vue distinguish them, otherwise Vue will only replace the content inside the same tag for efficiency.
24. Why avoid using v-if and v-for together
When Vue processes instructions, v-for has a higher priority than v-if, and moves to the container element through v-if, without repeatedly traversing each value in the list. Instead, we only check it once, and don't evaluate the v-for if the v-if is false.
25. What is VNode? What is virtual DOM?
The node rendered by Vue on the page, and its sub-nodes are called "Virtual Nodes (Virtual Node)", abbreviated as "VNode". "Virtual DOM" is the name of the entire VNode tree built by the Vue component tree.
Author: ywyan
Link: https://www.jianshu.com/p/b1dd80f4d542
Source:
Jianshu The copyright of Jianshu belongs to the author. For any form of reprint, please contact the author for authorization and indicate the source.