1. Life cycle? Which life cycle can get the real DOM? What life cycle is triggered by modifying data in data?
The life cycle consists of four phases: pre-create/create, pre-render/render, pre-update/update, and pre-destroy/destroy
DOM: Mounted; Modifying data in data triggers the updated life cycle
2. Why is component data a function?
There will be many components in the project, each component corresponds to a data; If data is just an object, it is easy to pollute the data, and the function returns a new object
3. Vue component communication? When you say “vuex”, you ask “How do you use”? Action and mutations? Implementation principle?
- Parent-child component value transfer: The parent component uses V-bind to transmit values, and the child component uses prop to receive values; The parent component uses REF to set a unique ID identifier for the child component to trigger the child component method response. The child component $emit triggers the parent component method response;
- Central EventBus EventBus: EventBus creates a Vue EventBus object, and then emits events through bus.emit, bus.emit, bus.on, and listens for the emitted events.
- Vuex sets global variables:
State: used to store data and is the only data source in the store; (this. $store. State. AllProducts)
Getters: a secondary wrapper based on state data, like the calculation attribute in VUE, which is often used for data filtering and correlation calculation of multiple data; (this. $store. Getters. CartProducts)
Mutations: similar to a function, the only way to change state data, and cannot be used to handle asynchronous events. (this.$store.com MIT (‘ setProducts’ {/ /.. The options}))
Actions: Similar to mutation, used to submit mutations to change state rather than directly change state, and can include arbitrary asynchronous operations; (this. $store. Dispatch (‘ getAllProducts’ {/ /.. Payload}))
Modules: Similar to a namespace, used in a project to define and manipulate the state of modules separately for easy maintenance
Store.state. a // -> moduleA status;
Store.state. b // -> moduleB status
4. Vue navigation guard, both global and component, is generally used for permission control, which may involve some authentication issues in the project.
5. What does $nextTick do? How does it work? The demotion of micro tasks to macro tasks is often asked to name several macro tasks, micro tasks.
NextTick is a deferred callback executed after the next DOM update cycle, using nextTick after modifying data is a deferred callback executed after the next DOM update cycle, or using nextTick after modifying data is a deferred callback executed after the next DOM update cycle. NextTick is used after modifying data; You can get the updated DOM in the callback.
Why it works: Dom updates immediately if data is frequently manipulated, which can cause significant performance problems;
Principle: Using the event loop mechanism, the data that needs to be updated is not immediately executed by the RUN method, but the cache is placed in the asynchronous update queue. At the same time, a micro-task is created for this execution queue to execute the update waiting inside. Wait for the main function to complete, execute the program in the queue, execute the callback function when the execution is complete.
An invalid view rendering is interspersed before the setTimeout code executes, so we try to use Promise to create microtasks for asynchronous updates
6. Vue responsive principle? Almost all of them
Data hijacking: During vUE initialization, properties in data are iterated, adding getter/setter methods to each property using Object. difineProperty;
Collect dependencies: Each component instance corresponds to a Watcher. Get proxy method We can collect the Watcher objects that depend on the data and save them in the Dep as the dependencies of the data.
Data update: When data is updated, setter method is triggered, and then the notify method of Dep is executed to notify the corresponding Watcher to update data and render it to the page;
Vue3.0 uses proxy to realize data responsiveness and accepts objects.
7. What does the vue scoped attribute do? How does it work?
The style is only used in the current component and is not used by other components to prevent component contamination. Implementation principle: Add data-V-xxx unique attribute
8. How many modes does vue Router have? How to implement it?
Three kinds of “hash” | | “history”, “abstract”
Hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api.
History: Relies on the HTML5 History API and server configuration. Check out the HTML5 History mode.
Support all JavaScript runtime environments, such as node.js server side. If the browser API is not found, routing automatically forces the mode into this mode.
9. What does key do? What does Vue do without a key? That raises the question of diff
Key’s function: to ensure the uniqueness of data rendering;
There is no key, the object. The key = undefined; Undefined ===undefined, vUE will compare key continue to use diff algorithm, compare update;
Problem: The update didn’t work the way we thought it would
10. React diff vs. Vue Diff
Vnode and OldNode after data changes are compared.
11. Vue 2.x defineProperty defect? What happens in the business code? $set principle? How does Vue override array methods? inspection
Set principle: Call splice function to trigger dispatch of updates, manually dispatch of updates, ob.dep.notify()
12. Do you really read the source code
13. Pros and cons of Vue 3.0 Proxy? What can I do if VUE3 does not support IE?
14. What are the differences between computed and Watch and the application scenarios? Beyond the basics, see if you can tell the difference between three types of Watcher
Computed: Computed attributes depend on other attribute values, and computed values are cached. Only when the dependent attribute values change, computed values will be recalculated the next time it obtains computed values.
Watch: It is more of a function of “observation”, similar to the listening callback of some data. Whenever the monitored data changes, the callback will be executed for subsequent operations.
Computed: Use computed items when an attribute is affected by multiple attributes
Watch: When one piece of data affects multiple pieces of data, watch is needed. Search data
15. Vue life cycle
We call this the Vue life cycle, starting with creating, initializing the data, compiling the template, mounting the Dom -> render, updating -> render, unmounting, etc.
16. Implementation principle of virtual DOM
JavaScript objects are used to simulate the real DOM tree and abstract the real DOM. Diff algorithm — Compare the difference between two virtual DOM trees; Pach algorithm – The difference between two virtual DOM objects is applied to a real DOM tree.