Recently entered the new company, generally speaking, or good. I have read a lot of knowledge points about VUE for a while. I will sort out my own understanding and deepen my impression. I also hope to help students in need. Any misunderstandings are welcome.
1. Understanding that Vue is an incremental framework answer: Vue is an incremental, non-compelling, lightweight view. It only did what it should do, and did nothing more.
2. What are the two cores of vue.js? A: Data-driven and componentized.
A: A template is a template. If we pass a template, we turn the template into a render function, which returns the virtual DOM, and turns the virtual DOM into the real DOM.
4. Principle of responsive data answer: Responsive data means that when data changes, the view can be updated synchronously. The core is Object.defineProperty. When vUE is initialized, Object.defineProperty will add get and set methods to data attributes in turn, and collect dependencies. If data changes, it will notify relevant dependencies to make corresponding updates.
What are the vUE lifecycle hook functions?
BeforeCreate () : for this function, the instance is just created in memory, and data and methods are not initialized. Created () : At this point, instances are created in memory and data and methods are initialized. The template is not compiled yet. BeforeMount () : At this point, the template is compiled successfully but not mounted to the page. Mounted () : A compiled template is mounted to a specified location. BeforeUpdate () : At this point, the DOM tree has not been re-rendered after the data data has been changed, the data is up to date, but the old data is still displayed on the page. Updated () : At this point, the data in data is the same as the render in the page. BeforeDestroy () : At this point, the instance’s methods, instructions are still available and called before the instance is destroyed. Destroyed () : All instructions, bindings, and listeners on the vue instance are destroyed, as well as all subinstances.
How are vue lifecycle hooks implemented? A: Vue’s lifecycle hook is really just a callback function. When we pass in a hook function, vUE internally calls it for us and converts the lifecycle hook into an array. When called, the array is iterated over again, similar to a publish-subscribe pattern.
7. What is the principle of bidirectional binding of VUE? A: VUE data bidirectional binding is implemented through data hijacking combined with the publisher-subscriber pattern. Implementation steps: ①. Implement a listener Observer that hijacks and listens to all attributes and notifies subscribers of any changes. ②. Implement a subscriber Watcher that can receive notification of property changes and execute corresponding functions to update the view. ③. Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the corresponding subscriber according to the initialization template data.
8. Why does vue manipulate the virtual DOM? A: The virtual DOM is an object that describes the real DOM. There are a lot of attributes on a real DOM, which is very inconvenient to operate. In order to reduce DOM operations, we first record the DOM to be updated during the update, then update the DOM to be updated, and finally update the DOM according to the DIff algorithm comparison. (The DIff algorithm in vUE is horizontal comparison and does not consider cross-level comparison.) The virtual DOM is independent of the real platform environment and can be implemented across platforms.
9. What’s the difference between V-IF and V-show? A: Both of these instructions determine whether the DOM node should be displayed. The difference is: ①. Implementation method: V-if is to directly delete or rebuild the element node from the Dom tree according to the judgment of the true or false value of the following data. V-show simply modifies the display attribute value of the element, which is always in the Dom tree. (2) Compilation process: V-IF switching has a partial compile/uninstall process, during which the internal event listeners and sub-components are properly destroyed and rebuilt; V-show is simply a CSS-BASED switch; V-if is lazy, if the initial condition is false, do nothing; Partial compilation starts only when the condition is true for the first time; V-show is compiled under any condition (whether the condition is true for the first time) and then cached, and DOM elements are always retained; (4) performance consumption: V-IF has higher switching consumption, which is not suitable for frequent switching; V-show has a higher initial render cost and is good for frequent switching;
The event modifier.stop is the same as the native JavaScript event. StopPropagation () to prevent events from bubbling. prevent: In line with the native JavaScript event.preventDefault(), prevent the default event.capture: in the opposite direction of event bubbling, event capture from the outside in. Self: only fires its own events, no child elements. Once: only fires once. The key modifier.delete (catch “delete” and “backspace” keys) is the same as the event modifier, mounted after the V-on: : :
V - on: keyup. XXX = "yyy" < input @ keyup. Delete = "onKey" / > 1Copy the codeCtrl.alt.shift.meta These modifiers can be used to press the corresponding key to trigger the mouse or keyboard event listener.
11. Can V-ON listen for multiple methods? A: you can
<button v-on="{mouseenter: onEnter,mouseleave: onLeave}"> </button> 1Copy the code12. What are the usage scenarios and principles of Vue. mixin? A: Vue. mixin can add public methods. When a component is initially called, mergeOptions methods are merged and combined for different properties. Vue.mixin also has many disadvantages, such as dependency issues, naming issues, data cannot be shared, data sources, etc.
A: The key is mainly used to update the virtual DOM efficiently. In VUE, the key attribute is also used when transitioning with elements with the same label name, so that vUE can distinguish between them, otherwise vUE will only replace its internal attributes without triggering transitions.
14. Why must data be a function in a Vue component? A: In new Vue(), data can be operated on as an object, whereas in Component, data can only exist as a function and cannot be assigned to it directly. When the data option is a function, each instance can maintain a separate copy of the returned object, so that the data in each instance does not affect each other and is independent.
15. Priority of V-for and V-IF A: V-for has a higher priority than V-IF.
16. What is the implementation principle of nextTick? A: The callback function in nextTick is executed after the next DOM update, delaying the callback to prevent multiple updates. NextTick is an asynchronous method (promise).
17, say at least 4 types of vUE instruction and its usage answer: ① V-if ② V-for ③ V-bind ⑤ V-model (two-way data binding)
$parent; $parent; $parent; $parent; Emit an event to the parent component using $emit. The parent component listens for this event. ③ The parent component passes the method to the child component and calls the method directly from the child component.
A: The parent uses the ref attribute to operate on the child component’s methods.
Test () {console.log(' hello ')}} 1234Copy the codeCall test in the parent component using this.$refs.childmethod.test ()
21. Talk about vUE’s dynamic components. A: Multiple components switch components through the same mount point. The value of IS is the name of the component, so the page will display the component.
22. Functions of keep-Alive built-in components answer: Keep-alive is a built-in component of VUE. The function of this component is to cache inactive components. When a component is switched, it will be destroyed by default.
A: VUE has rewritten the array prototype and changed some of the array methods, such as push, Shift, POP, splice, unshift, sort, reverse, all of which have the feature that they can change the original array value. When we use these methods to manipulate arrays, we hijack the original method and add our own functionality inside the function. If you want to update the index of an array, you need to use the vue.$set method to do so.
A: VUE does not allow you to dynamically add new root-level responsive attributes to an instance that has already been created. $set can trigger an update. When a new attribute is added to an object that does not exist, the watcher on which the object depends is triggered to update it. The array of operations shows the columns:
this.$set(arr, index, val)
1
Copy the codeExample Operation object:
this.$set( obj, key, val)
1
Copy the codeA: The callback function in nextTick is executed after the next DOM update, delaying the callback to prevent multiple updates. NextTick is an asynchronous method (promise).
Use of recursive components
A: In Export Default, one of the attributes is name. This property is important for recursive components. Recursive components can only do things with the name option. Recursive components must have an end condition, otherwise the component will be referenced in a loop, resulting in a “Max Stack size exceeded” error, i.e. stack overflow. So, we can use v-if=”false” as the end condition for the recursive component. When v-if is false, the component will no longer render.
27, How to define vue-router dynamic route? How do I get the passed value? A: Dynamic routes are created using the path attribute, using the dynamic path parameter, starting with a colon:
{
path: '/test/:id'
name: 'Test'
components: Test
}
12345678
Copy the codeAccess all files in the Test directory, and all properties on test are mapped to the Test component. When reading routes under /test, the parameters are placed in this.$route.params. This.$route.params.id can be used to dynamically obtain parameters.
What kind of guards does vue-router have? A: Route guard is global guard: beforeEach Post guard: afterEach Global resolution guard: beforeResolve Route exclusive guard: beforeEnter
BeforeEach () uses router. BeforeEach () to restrict access to the page. For example, if you log in, you cannot enter the page without logging in, and only after logging in can you have the permission to view some pages. That is, route interception. How it works: When a navigation is triggered, the global front-guard is called in the order it was created. The guard executes asynchronously, in which case the navigation remains in a wait state until all guards resolve. Each guard method takes three arguments: to: Route: the destination Route object to enter from: Route: the current navigation Route to leave next: Function: This method must be called to resolve the hook. Execute the call parameters that depend on the next method. Next (): performs the next hook in the queue. If all hooks are executed, the navigation state is confirmed. Next (false): interrupts current navigation. If the browser URL changes (either manually by the user or by the browser back button), the URL is reset to the address corresponding to the FROM route. Next (‘/’) or next({path: ‘/’}): jumps to a different address. The current navigation is interrupted and a new navigation is performed. Next (error): (2.4.0+) If the argument passed to Next is an error instance, the navigation is terminated and the error is passed to the callback registered with router.onerror ().
What is the difference between $route and $router A: $router is an instance of VueRouter. It is a global routing object that contains hop methods, hook functions, and so on. Each route has a route object, which is a local object, including path, Params, Hash, Query, fullPath, matched, name and other routing information parameters.
31. Vue-router responds to changes in routing parameters answer: ② Use beforeRouteUpdate(to,from,next) to navigate the hook function. To indicates the route object to jump to,from indicates the route to jump from, and next indicates the next hook function
32, Vue-router passer answer: ① When using Params, you can only use the name attribute, but cannot use path. Parameters will not be displayed on the path, and the browser will clear the parameter when refreshing. ② When using Query, parameters will be displayed on the path, but the refresh will not be cleared
33. What are the problems of not using Vuex? A: ① Decreased maintainability, modify data, need to maintain a good place ② decreased readability, the source of data in the Component is not clear ③ increased coupling. Vue uses Component originally to reduce coupling, if a large number of upload and distribution, but will increase the coupling degree.
34. What are the attributes of VUex? Answer: State, Getter, Mutation, Action, Module.
35. What is the State feature of VUEX? A: Vuex is like a warehouse with lots of objects in it. Where state is where the data source is stored, corresponding to the data in the Vue object. The data stored in state is reactive, and the Vue component reads data from the Store. If the data in the Store changes, the components that depend on that data are updated as well. It maps the global state and getters to the computed properties of the current component through mapState
What is the Getter feature of VUex? A: Getters can evaluate State, which is the evaluated property of Store. Getters can be reused across multiple components. If a state is only used within a component, you can dispense with getters
What are the Mutation characteristics of VUEX? A: An Action is similar to mutation, except that the Action commits mutation instead of directly changing the state. Actions can contain any asynchronous operation
38. Should ajax request code in vue.js be written in component’s Methods or vuex’s Actions? A: ① If the requested data does not need to be reused by other components and is only used in the requested component, it does not need to be put into the STATE of VUEX. (2) If the request is reused elsewhere, you can put the request in an action, return it as a promise, and process the returned data with async await at the call location.