1. What is Vue
- Vue is a progressive JavaScript framework for building user interfaces.
- Vue's core library only focuses on the view layer, which is easy to integrate with plugin third-party libraries or existing projects.
- The goal of Vue.js is to enable dynamic data binding and composing view components with the simplest possible API.
2. Advantages of Vue
- 1. Lightweight framework : only focus on the view layer, it is a view collection for building data, the size is only tens of kb, Vue.js provides efficient data binding and flexible component system through a concise API
- 2. Two-way data binding : This is the biggest advantage of vue.js. The two-way binding of data is realized through the idea of MVVM, so that developers no longer need to operate DOM objects and have more time to think about business logic.
- 3. Componentization : Through components, various modules in a single-page application are split into separate components, as long as various component labels are written in the parent application first, and the required components are written in the component labels. Pass in the parameters of the component, and then write the implementation of each component separately, and then the entire application is finished.
- 4. Separation of view, data, and structure : Make data changes easier, no need to modify logic code, and only need to manipulate data to complete related operations
- 5. Virtual DOM, higher operating efficiency : Based on virtual DOM, a technology that can perform various calculations in advance through javascript, calculate and optimize the final DOM operation, because this DOM operation is a preprocessing operation, there is no real Manipulate the DOM, so it is called virtual DOM.
- 6. Easy to learn : It is friendly to beginners, easy to get started, and has many learning materials. It has a large number of mature and stable ui frameworks and common components based on vue.js.
3. What is the MVVM pattern
- MVVM is divided into Model, View, ViewModel
- Model represents the data model, and both data and business logic are defined in the Model layer;
- View represents the UI view and is responsible for the display of data (html);
- ViewModel is responsible for monitoring data changes in the Model and controlling the update of the View, and handling user interaction;
The idea of MVVM: The Model and the View are not directly related, but are connected through the ViewModel. When the data in the Model changes, the refresh of the View layer will be triggered, and the data changed in the View due to user interaction will also be in the Model. Synchronization to achieve two-way data binding.
- Benefit: This mode realizes automatic synchronization of data between Model and View, so developers only need to focus on data maintenance operations, instead of operating the DOM themselves.
-
4. What is the MVC pattern
- The MVC pattern stands for the Model-View-Controller pattern. This pattern is used for layered development of applications.
- Model - Model represents an object or JAVA POJO that accesses data. It can also have logic to update the controller when the data changes.
- View - A view represents a visualization of the data contained in the model.
- Controller - Controllers act on models and views. It controls the flow of data to model objects and updates views as data changes. It keeps the view separate from the model.
The idea of MVC: Simply put, the Controller is responsible for displaying the Model's data in the View, displaying the Model's data to the user, and handling the user's operations on the View interface.
5. The difference between MVVM and MVC
- 1. MVVM is an enhanced version of MVC. The data and logic processing parts of the Controller in MVC are extracted and placed in the ViewModel, so that only the data binding between the View and the ViewModel can be done.
- 2. MVVM mainly solves the problem that a large number of DOM operations in MVC reduce page rendering performance, slow down loading speed, and affect user experience. When there are frequent changes to the Model, the developer needs to actively update the View.
Advantages of vue:
- 1. Low coupling. The 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.
- 2. Reusability. Put some view logic in a ViewModel, and let many views reuse this view logic.
- 3. Independent development. Developers can focus on business logic and data development (ViewModel), and designers can focus on page design.
-4, can be tested. Interfaces have always been difficult to test, and now tests can be written against ViewModels.
6. Understanding of vue life cycle
6-1. What is the life cycle of vue
- The process of Vue instance from creation to destruction is the life cycle. That is to say, a series of processes from starting to create (new Vue()), initializing data, compiling templates (created), mounting Dom→rendering (mounted), updating→rendering (update), uninstalling (destory), etc., we call this Vue's life cycle.
6-2. What is the role of the vue life cycle
- It has multiple event hooks in its life cycle, making it easier to form good logic when controlling the process of the entire Vue instance.
6-3. There are several stages in the vue life cycle
- It can be divided into 8 stages in total: before/after creation, before/after loading, before/after update, before/after destruction
6-4. Which hooks will be triggered on the first page load?
- The hooks beforeCreate, created, beforeMount, mounted are triggered when the page loads for the first time
6-5. In which cycle is DOM rendering completed?
- DOM rendering is done in mounted.
6-6. Briefly describe which scenarios each cycle is suitable for?
7. The difference between v-if and v-show
| The difference between v-if and v-show | |
|---|---|
| v-if | The actual rendering (the real destruction and reconstruction of the component) will be performed according to the initial conditions (the data defined in the data). If the condition is true, the conditional block will be rendered. If the condition is false, the conditional block will not be rendered. Piece. |
| v-show | Regardless of the initial condition, the element will always be rendered and simply toggled based on the CSS display: none or display: block properties. |
Common ground:
- Both v-if and v-show are displayed by judging the true\false of the bound data
Recommended usage:
- v-if is more suitable for operations with permissions. When rendering, the permission data is judged. If there is, the function will be displayed, and if not, it will be deleted.
- v-show is more suitable for daily use, which can reduce the rendering of data and reduce unnecessary operations.
- To sum up, when we need to switch the show/hide of an element frequently, using v-show will save more performance overhead; when we only need to show or hide once, it is more reasonable to use v-if.
8. What is Vuex
- Vuex is a state management pattern developed for Vue.js applications. The core of every Vuex application is the store. A "store" is basically a container that contains most of the state in your application.
- (1) The state storage of Vuex is reactive. When a Vue component reads state from the store, if the state in the store changes, the corresponding component will be efficiently updated accordingly.
- (2) The only way to change the state in the store is to explicitly commit mutations. This allows us to easily track each state change.
- (3) If you do not plan to develop large-scale single-page applications, using Vuex may be cumbersome and redundant. It's true - if the application is simple enough, it's best not to use Vuex. A simple store mode is sufficient. However, if you need to build a medium-to-large single-page application, you are likely to consider how to better manage state outside of components, and Vuex will become a natural choice.
| vuex module | |
|---|---|
| State | Basic data, which defines the data structure of the application state, you can set the default initial state here |
| Getter | Data derived from basic data, allowing components to get data from the Store, the mapGetters helper function just maps the getters in the store to local computed properties |
| Mutation | is the only way to change the state in the store and must be a synchronous function |
| Action | Like a decorator, wraps mutations to make them asynchronous. Used to commit mutations instead of changing state directly, can contain arbitrary asynchronous operations |
| Module | Modular Vuex, allowing a single store to be split into multiple stores and kept in a single state tree at the same time |
9. Understanding of Vue's one-way data flow
- All props form a one-way downlink binding between their parent and child props: updates to the parent prop flow down to the child component, but not the other way around.
- This prevents accidental changes to the parent's state from child components, which can make your app's data flow unintelligible. In addition, every time the parent component is updated, all props in the child component
will be refreshed to the latest value. This means you shouldn't change props inside a child component. If you do, Vue will issue a warning in the browser's console. - When the child component wants to modify, it can only dispatch a custom event through $emit. After the parent component receives it, it is modified by the parent component.