This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge
Summarize some vUE related knowledge, organize notes to share with you, some knowledge will often be asked in the front interview, so make a record, hope to be helpful to you, if there is any problem, you can point out, will actively correct. If you like, you can like or leave a message and I will continue to update the interview questions ~~~~, thank you ~~~
1. How about your understanding of Vue? What is vue.js?
Vue (pronounced /vjuː, similar to view) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied from the bottom up. Vue’s core libraries focus solely on the view layer and are not only easy to get started with, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and a variety of supporting libraries, Vue is perfectly capable of driving complex, single-page applications. Vue is a progressive framework, equivalent to the View layer, two-way data binding, it is lighter, more efficient in performance, easier to learn than other frameworks, low learning cost, VUE needs an EL object to instantiate,
How does Vue differ from Angular and React?
Angular is an MVVM framework, while VUE is an incremental framework, equivalent to the View layer. Both have bidirectional data binding, but Angular bidirectional data binding is based on the dirty check mechanism, vUE bidirectional data binding is based on ES5 getters and setters. While Angular implements its own set of template compilation rules, VUE is lighter, more efficient, easier to learn, and cheaper to learn than Angular. Vue requires an EL object to instantiate, whereas Angular is a single page application within an entire HTML page. And vue can have vue instance 1. The differences between AngularJS and AngularJS are similar: both support directives: built-in 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 has a high learning cost. For example, The Dependency Injection feature is added, while vue. js provides a simple and intuitive API. In terms of performance, AngularJS relies on dirty checking for data, so more watchers mean slower. Vue.js uses observations based on dependency tracing and uses asynchronous queue updates, all of which are triggered independently. 2. Similarities between React and React: React uses special JSX syntax, and Vue. Js also supports writing in component development. The main idea is the same: everything is a component, and component instances can be nested; Both provide reasonable hook functions that allow developers to customize to handle requirements; None of them have built-in column count AJAX, Route and other features to the core package, but they are loaded as plug-ins. Mixins features are supported in component development. Differences: React uses a Virtual DOM that does a dirty check on rendered results. Vue.js provides instructions and filters in the template, which can be very convenient and fast to operate the Virtual DOM.
3. The life cycle of VUE?
The process from instance creation to destruction is the life cycle. This is the process from start to create, initialize the data, compile the template, mount the Dom, render, update, render, uninstall, and so on. We call this the life cycle of Vue. BeforeCreate: After a new vue instance, there are only some default lifecycle hooks and default events, nothing else is created. At the time of execution of the beforeCreate life cycle, the data in both data and Methods is not initialized. You cannot use data in data or methods in this phase. Create: Both data and methods have been initialized. If you want to call methods in methods or manipulate data, you can do it in this phase at the earliest. When the hook is executed, the template has been compiled in memory, but the page has not yet been mounted. In this case, the page is still mounted. The component moves out of the create phase and into the run phase. If we want to manipulate DOM nodes on the page with plugins, the earliest we can do is beforeUpdate: When the hook is executed, the data displayed in the page is old, the data in data is updated, and the page is not updated with the latest data: The data displayed on the page and the data in the data are kept up to date with the beforeDestory: The Vue instance moves from the run stage to the destruction stage, at which time all data and methods, instructions, filters… Both are in the available state. – All data, methods, instructions, filters are destroyed on the screen at this time… Are in the unavailable state. The component has been destroyed.
4. What is the role of the VUE lifecycle?
It has multiple event hooks throughout its lifecycle, making it easier to form good logic when controlling the process of an entire Vue instance.
5. How many phases are there in the VUE lifecycle?
It can be divided into eight phases: pre/post creation, pre/post load, pre/post update, and pre/post destroy
6. Which hooks are triggered the first time the page loads?
BeforeCreate, created, beforeMount, Mounted
In which periodic function does Vue obtain data?
Generally created/beforeMount/mounted. For example, if you want to manipulate the DOM, it must be mounted.
What is the MVVM framework?
Vue 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, the bidirectional binding technology is used, that is, the change of View can change the Model in real time, and the change of Model can also be updated to the View in real time.
9. How is two-way data binding implemented in Vue?
Vue bidirectional data binding is implemented through data hijacking combined with publish/subscribe mode. That is to say, data and views are synchronized. When data changes, views follow the changes, and when views change, data also changes. Core: The core of VUE bidirectional data binding is the object.defineProperty () method.
How does VUE implement responsive data? (Responsive data principle) ❗
Reference: blog.csdn.net/kzj0916/art… Principle: Those who have used VUE know that the data defined in vUE data will be updated as we change the data through methods, and the relevant data on the page will also be refreshed accordingly, so as to achieve responsive data. But do you know how it does that? Let’s see how it does this amazing thing.
Object.defineproperty listens to modify read data:
Object.defineproperty (obj, prop, descriptor) can be passed in three values, which is used to define a new property on an Object, or modify an existing property on an Object, and return the Object.
The first value is passed in the object to be modified
The second value is passed in the key to be modified in the object
The third value is an object that has two methods, set and get. Set is what you do when you change the value and get is what you do when you read it
The default configuration is as follows
We create an Object and use object.keys () to return the key in the Object to an array and forEach through the array
Take the corresponding value of key first, modify each different key in this Object through object.defineProperty and listen for the change of data. When modifying the value corresponding to the key, call the set method to print and listen for the change of XXXX data and assign the modified value to value
When reading the value corresponding to the key, call the get method to print the value corresponding to XXXX and directly return the current value
11,How do we detect array changes in Vue?
vue.set()
12,Why is data in vue a function?
Because of the nature of JavaScript, data must exist in a Component as a function, not as an object. 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 copy of data will be returned. It is equivalent to that each component instance has its own private data space, and they are only responsible for their own data maintenance, which will not cause confusion. If you simply write it as an object, it means that all component instances share the same data.
13. Describe the use scenarios of computed and Watch.
Computed: Use computed when an attribute is affected by multiple attributes. The most typical example is shopping cart checkout. Watch: Search for data when a single item affects multiple items
14. What is the difference between created and Mounted?
Created: Called before the template is rendered into HTML, usually to initialize some property value and then render it into a view. Mounted: called after the template has been rendered into HTML, usually after the page has been initialized and the HTML DOM node needs to be processed.
15. Two modes of vue-Router?
Hash mode: the # symbol in the URL of the address bar; History mode: The window.history object is printed out to see the methods and record length provided inside. Take advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. (Requires browser specific support).
What’s the difference between Params and Query?
Usage: Query is introduced with path, params is introduced with name, the receiving parameters are similar, Name and this.route.query. Name and this.route.query. Name and this.route.query. Name and this.route.params.name. Url address display: Query is more similar to our Ajax get pass, and params is more like post. The former displays the parameter in the browser address bar, while the latter does not. A Query refresh does not lose data in the Query. A Params refresh does lose data in the Params.
/ / query syntax:
this.$router.push({path:"Address".query: {id:"123"}}); // This is the passing parameter
this. $route. Query. Id;// This is the accepted parameter
/ / params grammar:
this.$router.push({name:"Address".params: {id:"123"}}); // This is the passing parameter
this.$route.params.id; // This is the accepted parameter
Copy the code17. Pass values between components?
Father to son: props to father: $emit method
18, the use of $nextTick?
When you change the value of data and then immediately retrieve the value of the DOM element, you can’t get the updated value. You need to use the $nextTick callback to render the updated data value to the DOM element before retrieving it.
// Modify the data
vm.msg = 'Hello'
// The DOM has not been updated
Vue.nextTick(function () {
/ / update the DOM
})
Copy the code</ keep-alive></ keep-alive>
Keep-alive is a component built into Vue that allows included components to retain state or avoid rerendering.
20. Why use key?
The Diff algorithm can correctly identify each node by using a key to make a unique identifier. It is mainly used to update the virtual DOM efficiently.
21. What are the similarities and differences between v-show and V-IF commands?
Common points: both can control the display and hide of elements; V -show: The display of the CSS is set to none, control hidden, will only compile once; V-if dynamically adds or removes DOM elements from the DOM tree. If the initial value is false, it will not compile. Moreover, v-IF’s constant destruction and creation cost performance. Conclusion: If you want to switch a node frequently, use v-show(switch cost is small, initial cost is large). Use V-if if you do not need to switch a node frequently (the initial rendering overhead is small, switching overhead is large).
22. How do I make the CSS work only for the current component?
Add scoped in front of style in the component
23,How do I get the DOM?
$refs.domName = $refs.domName = $refs.domName
24, name several vUE instructions and its usage?
V-model bidirectional data binding; V – for loop; V-if V-show show and hide; V – on events; V-once: binds only once.
25. Use of V-modal?
V-model is used for bidirectional binding of form data, which is actually a syntax sugar. There are two operations behind this: v-bind binds a value attribute; The V-ON directive binds an input event to the current element.
Describe the usage of each folder and file in the SRC directory of the vue.cli project.
The Assets folder is for static resources; Components are put components; Router defines the configuration related to routes. App. vue is an application main component; Main.js is the entry file.
27. What’s the difference between assets and static?
Similarities: Both assets and static store static resource files. Resource files, such as pictures, font ICONS, style files, etc. needed in the project can be placed under these two files, which are the similarities and differences: When the project is packaged, that is, when the NPM Run build is run, the static resource files placed in assets will be packaged and uploaded. The so-called simple packaging can be understood as compressed volume and code formatting. 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 need to go through the process of packaging, compression, formatting, etc., but directly into the packaged directory, directly uploaded to the server. Because compression is avoided and directly uploaded, certain efficiency will be improved in packaging. However, since no operation such as compression is performed on the resource file in static, the size of the file will be larger than that of the file submitted after being packaged in Assets. It takes up more space in the server. Suggestion: Place all the style files, such as JS files, required by the template in the project in Assets, and go through the process of packaging. Reduce the 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 deal with them, and directly upload them.
Can V-ON listen to more than one method?
Can, example: < input type = “text” v – on = “{input: the onInput, focus: an onFocus, blur, onBlur,}” >.
29. Two core points of VUE
Data-driven, component system data-driven: ViewModel, to ensure data and view consistency. Component systems: Application UIs can be thought of entirely as a tree of components.
The difference between vue and jQuery
JQuery uses selectors ($) to select DOM objects and perform operations such as assignment, value, event binding, and so on. In fact, the difference between jQuery and native HTML is that it is more convenient to select and manipulate DOM objects, while the data and interface are together. $(” label “).val(); $(” label “).val(); Again, it depends on the value of the DOM element. Vue completely separates the data from the View through the Vue object. There is no need to reference the corresponding DOM object to manipulate the data, so the data and View are separate, and they are bound to each other through the Vue object, the VM. This is the legendary MVVM.
Delete and vue. delete delete array
Delete only changes the deleted element to empty/undefined and keeps the keys of the other elements unchanged. Vue.delete deletes the array and changes the key of the array.
What are the features of AXIos
XMLHttpRequests from the browser; Node.js creates the HTTP request; Support for Promise API; Intercepting requests and responses; Transform request data and response data; Cancel request; Automatically change to JSON. In Axios, the send field parameters are data and params. The difference between params and params is that params is sent with the address of the request. Data is sent as a request body.
The vUE initialization page is blinking
When using vue development, before vue initialization, because div is not controlled by vue, so we write code in the case of not parsed is easy to appear the phenomenon of flower screen, see similar to {{message}} words, although in general this time is very short, but we still need to let solve this problem. [v-cloak] {display: none; }. If the problem is not completely resolved, add style=”display: none;” to the root element. :style=”{display: ‘block’}”
34, Method that triggers view updates when vue updates an array
Push (); Pop (); The shift (); Unshift (); Splice (); Sort (); reverse()
35, vue commonly used modifier?
Stop: Equivalent to Event.stopPropagation () in JavaScript to prevent events from bubbling; .prevent: equivalent to the JavaScript event.preventDefault(), prevent the default behavior from being performed (if the event can be cancelled, cancel the event without stopping further propagation); .capture: Events are captured from the outside in, contrary to the direction of event bubble; .self: only fires events in its own scope and contains no child elements; .once: Triggers only once.
36. Issues related to VUEX
Reference: blog.csdn.net/u012967771/…
What is VUex? How does it work? Which functional scenario uses it?
State management in the VUE framework. Import store in main.js, inject. Create a new directory store.js… . Export. The scenarios are as follows: Status of components in a single-page application. Music playing, login status, add to cart
38. About VueX
VueX is a state management tool suitable for use in Vue project development. Consider a project that frequently synchronizes values in data by passing parameters to components. Once the project is large, managing and maintaining these values can be a tricky task. To this end, Vue provides a unified management tool, VueX, for these values that are frequently used by multiple components. In a Vue project with VueX, we only need to define these values in VueX, which can be used throughout the components of the Vue project.
39. Purpose of using Vuex
Implement multi-component state management. When multiple components need to share data, Vuex is a great help
40. Five cores of Vuex
State: responsible for state management, similar to data in VUE, used to initialize data // state management Commit = commit = commit = commit = commit = commit You can handle asynchrony, which is triggered by dispatch, and you can’t modify state directly. You can first trigger the action in the component by Dispatch, and then commit the mutation inside the action function, Change the state value by mutation. The calculation attribute in Vuex, which is equivalent to computed in VUE, depends on the state value. Once the state value changes, the getter recalculates. That is, when one data is dependent on another data, the getter must be used
// Import vue and vuex
import Vue from 'vue'
import Vuex from 'vuex'
/ / mount vuex
Vue.use(Vuex)
// Create a vuex object and expose it
export default new Vuex.Store({
// Global property variable
state: {},This.store.com MIT (" XXX ")
mutations: {},This.$store.dispatch(" XXX ")
actions: {},// The Vuex attribute is calculated and used as a variable in the view
getters: {},// Modular registration
modules: {}})Copy the codeWhat is the difference between action and mutation?
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')}}})Copy the code1. Process sequence
“Corresponding View – > Modify State” is split into two parts. The view triggers Action, which then triggers Mutation.
2. Role positioning
They play different roles based on the sequence of processes.
Mutation: Focus on modifying State, theoretically the only way to modify State.
Action: Business code, asynchronous request.
3, restrictions,
Different roles have different limitations.
Mutation: must be executed synchronously.
Action: Can be asynchronous, but cannot directly operate on State.
Other relevant summary articles
- HTML Interview Summary
- CSS Interview Summary
- Summary of JS Interview
- Summary of ES6 interview
- Small program interview summary