Like the baby please click attention, attention to the author does not get lost oh ~
1. Talk about your understanding of MVVM
MVVM stands for model-view-ViewModel.
The Model represents the data Model, where you can also define the business logic for data modification and manipulation. **View** represents the UI component that transforms the data model into a UI presentation. **ViewModel** Is an object that synchronizes the View and Model, and connects the Model and the View.
The ViewModel and Model implement two-way data binding
2. Talk about your life cycle for Vue
1. What is the VUE lifecycle? A: The lifecycle of a Vue instance is the process from creation to destruction. The life cycle of a Vue is a series of processes from the beginning of creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and destroying.
2. What is the role of the VUE lifecycle? A: It has multiple event hooks throughout its lifecycle, making it easier to form good logic when controlling the process of the entire Vue instance.
3. How many phases are there in the VUE life cycle? A: It can be divided into 8 stages altogether: before/after creation, before/after loading, before/after update, and before/after destruction.
4. Which hooks trigger the first page load? A: Generates beforeCreate, created, beforeMount, mounted.
5. In which cycle is DOM rendering completed? A: DOM rendering is done in Mounted.
3. What is the VUE lifecycle?
A: The lifecycle of a Vue instance is the process from creation to destruction. The life cycle of a Vue is a series of processes from the beginning of creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and destroying.
2. What is the role of the VUE lifecycle? A: It has multiple event hooks throughout its lifecycle, making it easier to form good logic when controlling the process of the entire Vue instance.
3. How many phases are there in the VUE life cycle? A: It can be divided into 8 stages altogether: before/after creation, before/after loading, before/after update, and before/after destruction.
4. Which hooks trigger the first page load? A: Generates beforeCreate, created, beforeMount, mounted.
5. In which cycle is DOM rendering completed? A: DOM rendering is done in Mounted.
4.Vue realizes the principle of two-way data binding
Vue implements bidirectional data binding mainly by using data hijacking combined with publiser-subscriber mode, hijacking setter and getter of each attribute through ** object.defineProperty () **, publishing messages to subscribers when data changes, and triggering corresponding listening callback. When passing an ordinary Javascript Object to a Vue instance as its data option, Vue iterates through its properties, turning them into getters/setters with Object.defineProperty. Getters/setters are invisible to the user, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.
The two-way data binding of VUE takes MVVM as the entry of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor the data changes of its model, and uses Compile to parse and Compile template instructions (vUE is used to parse {{}}). Finally, watcher is used to build a communication bridge between observer and Compile to achieve data change – > view update; View Interactive Changes (INPUT) — > Data Model changes the bidirectional binding effect.
5.Vue routing implementation: Hash mode and history mode
** Hash mode: ** in the browser symbol “#”, # and # after the character called hash, window.location.hash; Features: Hash is in the URL, but is not included in the HTTP request. Hash is used to instruct browser actions. It is useless for server security and does not reload pages. In hash mode, only the content before the hash symbol is included in the request, such as www.xxx.com. Therefore, the back end will not return a 404 error even if the route is not fully covered.
** History mode: ** History uses new HTML5 features; Two new methods are provided: pushState (), replaceState () to modify the browser history stack, and popState events to listen for state changes. In history mode, the URL of the front end must be the same as the URL of the back end, for example, www.xxx.com/items/id. The back end will return a 404 error if there is no routing for /items/ ID.
6. How does Vue differ from Angular and React?
1. Similarities with AngularJS differences: Both support directives: built-in directives and custom directives; Both support filters: built-in filters and custom filters; Both support bidirectional data binding; None of them support low-end browsers.
Differences: AngularJS is expensive to learn, such as adding Dependency Injection, while vue.js provides simple and intuitive apis. In terms of performance, AngularJS relies on data being dirty checked, so the more Watcher you have, the slower it is; Vue.js uses dependency tracing based observations and uses asynchronous queue updates, where all data is triggered independently.
React uses a special JSX syntax, and Vue. Js is also recommended for component development. Vue has a special file format, and has some conventions for file contents. The central idea is the same: everything is a component, and component instances can be nested; Both provide reasonable hook functions that developers can customize to handle requirements; Do not build AJAX, Route and other functions into the core package, but in the way of plug-in loading; The feature of mixins is supported in component development. React uses the Virtual DOM to do dirty checks on rendered results. Vue.js provides instructions and filters in the template, which can be very convenient and fast to operate Virtual DOM.
7. What is vuex? How to use it? Which functional scenarios use it?
Reading-only states are concentrated in stores; The way to change that is to submit mutations, which is a simultaneous thing; Asynchronous logic should be encapsulated in actions. Import store and inject in main.js. Create a new directory store… . Export. The scenarios include: status between components, music playing, login status, and adding to shopping cart in a one-page application
State Vuex uses a single state tree, where each application will contain only one store instance, but a single state tree is not incompatible with modularity. The state of the stored data cannot be modified directly. Mutations The method defined by Mutations dynamically modifies the state or data in Vuex’s store. Getters is a vUe-like computational attribute that filters data. Action Actions can be understood as a method that transforms the data in mutations into a method that can process the data asynchronously. Simply speaking, it is an asynchronous manipulation of data. The View layer distributes actions through store.dispath.
Open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations = new vuex. open mutations { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })Copy the codeWhen the modules project is particularly complex, each module can have its own state, mutation, action, and getters, which makes the structure very clear and easy to manage.
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
Copy the code7. What do you know about Keep-alive?
Keep-alive is a component built into Vue that can preserve the state of contained components or avoid re-rendering. After vue version 2.1.0, keep-alive added two new attributes: include(cache of included components) and exclude(exclude components are not cached and have a higher priority than include).
Method of use
<keep-alive include='include_components' exclude='exclude_components'> <component> <! -- Whether the component is cached depends on include and exclude attributes --> </component> </keep-alive>Copy the codeParameter Description Include-string or regular expression. Only components with matching names will be cached. Exclude-string or regular expression components with matching names will not be cached. Both can use commas to separate strings, regular expressions, and arrays. Remember to use V-bind when using re’s or arrays.
Parameter Description Include-string or regular expression. Only components with matching names will be cached. Exclude-string or regular expression components with matching names will not be cached. Both can use commas to separate strings, regular expressions, and arrays. Remember to use V-bind when using re’s or arrays.
Use the sample
<! -- Comma-separated strings, only components A and B are cached. --> <keep-alive include="a,b"> <component></component> </keep-alive> <! - regular expressions (need to use the v - bind, in line with the matching rules will be cached) - > < keep alive: - include = "/ a | b/" > < component > < / component > < / keep alive - > <! --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>Copy the code8. How do I make **** CSS work only for the current component
Write scoped in the style tag. For example:
** the difference between v-if and V-show
V-if renders according to conditions, v-show is block or None of display
10. What are the two cores of vue.js?
Data driven, component system data driven: ViewModel, to ensure data and view consistency. Component systems: The application UI can be thought of as being entirely composed of component trees.
11. What is the function of key value in vue?
A: When vue.js is updating a rendered element list with V-for, it defaults to a “reuse in place” policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and make sure it shows every element that has been rendered under a specific index. The key’s main purpose is to update the virtual DOM efficiently.
12****. What are the computed attributes of vue **? **
A: When vue.js is updating a rendered element list with V-for, it defaults to a “reuse in place” policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and make sure it shows every element that has been rendered under a specific index. The key’s main purpose is to update the virtual DOM efficiently.
13. Vue and other single-page applications and their advantages and disadvantages
A: Pros: Vue aims to implement data binding and composite view components for responses through as simple an API as possible, with a data binding system for responses at its core. MVVM, data-driven, componentized, lightweight, simple, efficient, fast, module-friendly. Disadvantages: Does not support earlier versions of browsers, as low as IE9; Not conducive to SEO optimization (if you want to support SEO, it is recommended to render components through the server); The first time to load the home page is relatively long; You can’t use the browser’s navigation buttons. You need to move forward and backward.
14. What are the advantages of VUE?
Lightweight framework: Focused only on the view layer, is a collection of views that build data, only tens of KB in size; Easy to learn: Chinese developed, Chinese documents, there is no language barrier, easy to understand and learn; Two-way data binding: Preserves Angular features and makes data manipulation easier; Componentization: React retains the advantages of encapsulation and reuse of HTML, and has unique advantages in building single-page applications. Separation of view, data and structure: it makes it easier to change the data, without the need to modify the logical code, and only need to operate the data to complete the relevant operations; Virtual DOM: DOM manipulation is very performance consuming. The native DOM manipulation node is no longer used, which greatly liberates DOM manipulation. However, the specific DOM operation is just changed in another way. Faster operation: Compared with React, vUE also operates virtual DOM. In terms of performance, vue has a big advantage.
15. What are the similarities and differences between V-show and V-IF directives?
What they have in common: The ability to show and hide elements; Difference: The implementation of the essence of the method is different, the essence of v-show is to control the CSS display set to None, control hidden, will only compile once; V-if dynamically adds or deletes to the DOM tree
16**. Do you know what $nextTick is? **
When you modify the value of data and immediately retrieve the dom element value, you cannot retrieve the updated value. You need to use the $nextTick callback to render the modified data value and update it to the DOM element before retrieving it
17. Why must data be a function in a Vue component?
Because of the nature of JavaScript, in Component, data must exist as functions, not objects. The data in the component is written as a function, and the data is defined in the form of the return value of the function. In this way, every time the component is reused, a new data will be returned, which means that each component instance has its own private data space, and they are only responsible for the data they maintain, without causing confusion. In pure object form, all component instances share the same data, so change one all changed.
18. An understanding of progressive frameworks
The least advocacy; Different tiers can be selected according to different requirements
19. V-if and V-for priorities
When v-if is used with V-for, v-for has a higher priority than V-if, which means that V-IF will be repeated separately 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, vUE will automatically indicate that v-if should be placed in the outer layer.
20. The difference between assets and static
Similarities: Assets and static both store static resource files. Resource files, images, font ICONS, style files, etc. needed in the project can be placed under these two files, which are the same. The static resource files stored in assets are packaged and uploaded when the project is packaged, that is, when the NPM run build is run. The so-called simple packaging point can be understood as compression volume and code formatting. The compressed static resource file is eventually placed in a static file and uploaded to the server along with index.html. Static resource files do not need to go through the packaging, compression and formatting process, but directly into the packaged directory, directly uploaded to the server. However, static resource files are not compressed, so the volume of the file is larger than that of the packaged assets file. It takes up more space on the server. Suggestion: Place style files js files required by the template in the project in assets and go through the packaging process. Reduce volume. The third-party resource files introduced in the project, such as iconfoont. CSS, can be placed in static, because these imported third-party files have been processed, we no longer need to process, directly upload.
21. What are the common modifiers of vue?
.stop: equivalent to JavaScript event.stopPropagation() to prevent event bubbles; .prevent: Equivalent to event.preventDefault() in JavaScript, to prevent the preset behavior from being performed (if the event is cancelable, cancel the event without stopping further propagation of the event); .capture: In contrast to the direction of event bubbling, events are captured from the outside in; .self: triggers only events within its own scope, no child elements; .once: Triggers only once.
22. Differences between Vue and jQuery
JQuery uses the selector () to select DOM objects and perform operations such as assignment, value, and event binding. The only difference between jQuery and native HTML is that it is easier to select and manipulate DOM objects, and the data and interface are together. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, to obtain the contents of the label :(“lable”).val(); Again, it depends on the DOM element value. Vue completely separates the data from the View through Vue objects. Manipulation of data no longer refers to the corresponding DOM object, so data and View are separated, and they are bound to each other through the VM Vue object. This is known as MVVM.
23. Which hooks trigger the first page load?
BeforeCreate, created, beforeMount, Mounted
24. Describe the specific scenarios for each cycle
BeforeCreate: After new a vue instance, only some default lifecycle hooks and default events are left uncreated. When the beforeCreate life cycle is executed, the data in data and methods are not initialized. Create: Data and methods are already initialized. If you want to call methods in methods or manipulate data in data, the earliest you can do beforeMount is in this phase: Mounted: When this hook is mounted, the Vue instance is initialized. At this point, the component leaves the creation phase and enters the run phase. If we want to manipulate a DOM node on a page with a plugin, we can do beforeUpdate as early as in and phases: When this hook is executed, the data displayed in the page is old, the data in data is updated, and the page is not yet synchronized with the latest data: The data displayed on the page is already in sync with the data in the data, it is up-to-date. BeforeDestory: The Vue instance moves from the run phase to the destroy phase, at which point all data and methods, instructions, filters… They’re all available. They have not destroyed all data and methods, commands, filters… They are all unavailable. The component has been destroyed.
25. Created and Mounted
Created: Called before a template is rendered to HTML, usually by initializing some property values and then rendering to a view. Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized
26.
The difference between the router
Router is an instance of VueRouter, and if you want to navigate to different urls in the script tag, To navigate to different urls in script tags, use the router.push method. To (−1)router.to(-1) router.to(−1)router.to(−1)router.to(−1)router.to(−1)router.to(−1)router.to(−1) Router.to (−1) Router.to (−1) Router.to You can obtain the name,path,query, and parmas of the current route.
27. Two modes of Vue-Router
Hash mode: the # symbol in the URL of the address bar; History mode: The window.history object is printed to see the method and record length provided in it. Takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. (Requires browser specific support).
28. Vue-router implements lazy route loading (dynamic route loading)
The first method is: vUE asynchronous component technology ==== Asynchronous loading, vue-router configures routes, using vUE asynchronous component technology, can realize on-demand loading. However, in this case a component generates a JS file. The second type: lazy route loading (using import). The third type: Require.ensure () provided by Webpack, vue-router configures routing, using Webpack’s Require.Ensure technology, which can also be loaded on demand. In this case, multiple routes with the same chunkName are combined and packaged into a single JS file. Vuex often meet test questions
29. What is vuex? How to use it? Which functional scenarios use it?
A: State management in the VUE framework. Import store and inject in main.js. Create a new directory, store.js… . Export. The scenarios are as follows: Status between components in a single-page application. Music play, login status, add shopping cart
30. What are the attributes of vuex?
A: Mutations => Open mutations => open mutations => open mutations => open mutations => open mutations => open mutations Actions => acts like an decorator, wrapping mutations so it can be asynchronous. Modules => Modular Vuex
31. Should ajax request code in vue.js be written in component’s methods or vuex’s Actions?
A: If the requested data is not to be shared by other components, it does not need to be put into vuEX state if it is only used within the requested component.
Like the baby please click attention, attention to the author does not get lost oh ~