simple
1. How to understand the one-way data flow of Vue
Data is always passed from the parent to the child. The child has no right to modify the data passed by the parent, but can only request the parent to modify the original data. This prevents accidental changes in the state of the parent component from the child, which can make the data flow of your application difficult to understand.
medium
2. The principle of Vue2.0 responsive data
The whole idea is data hijacking + observer mode.
- Properties are hijacked using Object.defineProperty (only existing properties are hijacked), while arrays are done by overriding array methods. When a page uses a corresponding attribute, each attribute has its own DEP attribute, which stores the watcher it depends on (dependent collection). When the attribute changes, the corresponding Watcher will be notified to update (distributed update).
3. How does Vue detect array changes
- An array of
Each entry in the array is not intercepted by defineProperty for performance reasons
It’s about choosing the right oneSeven kinds of array
(shift, push, pop, splice, unshift, sort, reverse) method rewrite (AOP sliced thought) - So changing the index and length of an array in Vue is unmonitored. You need to modify the array through the above 7 variation methods to trigger the watcher of the array to update.
4. Vue’s parent-child component lifecycle hook function execution sequence
- Loading the rendering process
Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent Mounted
- Child component update process
Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updated
- Parent component update process
Father father beforeUpdate – > updated
- Destruction of the process
Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyed
5. V – model principle
V-models are just syntactic sugar.
Internally, the V-Model uses different properties for different input elements and throws different events:
- Text and Textarea elements use value property and input events;
- Checkbox and radio use checked Property and change events;
- The SELECT field takes value as prop and change as an event.
6. Vue event binding principle
- Native event bindings are bound to real elements via addEventListener, and component event bindings are implemented via Vue’s custom $on. If you want to use native events on a component, you need to add a. Native modifier, which is equivalent to adding native events to the parent component by treating the child component as a normal HTML tag.
$on
,$emit
It’s publish-subscribe based, maintains an event center,$on
The event is stored in the event center by name, called subscriber, and then$emit
Publish the corresponding event to execute the corresponding listener in the event center.
7. Vue-router what is the hook function
There are three types of VUE route guards:
- One is the global route guard, which is usually set up after the route is instantiated, to perform some general routing operations that are performed by all route hops.
- One is a guard that is exclusive to a single route. It is set when a single route is defined and all jumps are executed by the route.
- The other is intra-component guards, which only work within components.
Global routing guard type:
router.beforeEach(to, from, next)
router.beforeResolve((to, from, next))
Called before navigation is confirmed, and after guard and asynchronous routing components have been resolved within all components.router.afterEach(to, from)
Route exclusive guard:
beforeEnter(to, from, next)
Component exclusive guard:
beforeRouteEnter(to, from, next)
beforeRouteUpdate(to, from, next)
Called when the component instance is being reused when the dynamic parameter path changes.beforeRouteLeave(to, from, next)
Called when the navigation leaves the component’s route.
Complete navigation parsing flow:
- Navigation is triggered.
- Called in a deactivated component
beforeRouteLeave
The guards. - Call global
beforeEach
The guards. - Called in a reused component
beforeRouteUpdate
Guard (+ 2.2). - Called in the routing configuration
beforeEnter
. - Parse the asynchronous routing component.
- Called in the active component
beforeRouteEnter
. - Call global
beforeResolve
Guard (+ 2.5). - Navigation confirmed.
- Call global
afterEach
Hook. - Trigger a DOM update.
- call
beforeRouteEnter
The created component instance is passed in as an argument to the callback function passed to Next in the guard.
8. What is a vue-router dynamic route
We often need to map all the routes that a pattern matches to the same component. For example, we have a User component that is used to render for all users with different ids. We can use dynamic segments on vue-router routes to achieve this effect:
const User = { template: "<div>User</div>", }; Const router = new VueRouter({routes: [// Dynamic route parameter starts with a colon {path: "/user/:id", Component: user},],});Copy the code
Question: What should I do if route parameters fail due to vue-Router component reuse?
Solutions:
1. Use watch to listen to route parameters and send a request
watch: { // Use watch to listen for route changes
"$route": function(){
this.getData(this.$route.params.xxx); // A call to get user data}}Copy the code
2. Use :key to prevent “reuse”
<router-view :key="$route.fullPath" />
Copy the code
9. Why VuexPoints module
andAdd namespace
Module: Because of the use of a single state tree, all the states of the application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated. To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules.
Namespaces: By default, actions, mutation, and getters inside a module are registered in the global namespace — this enables multiple modules to respond to the same mutation or action. If you want your modules to be more wrapped and reusable, you can make them namespaced by adding namespaced: True. When a module is registered, all its getters, actions, and mutations are automatically named according to the path the module was registered with. It means to have its own part of the namespace, so that every module is not registered in the global namespace. Even if the data and method names of each module are the same, they can be distinguished, and also meet higher reusability and encapsulation.
10. What Vue performance optimizations have you done
- Do not make the object hierarchy too deep, or performance will be poor
- Do not place data in data that does not require responsiveness (you can use Object.freeze() to freeze data)
- V-if and V-show are used in different scenarios
- Computed and Watch distinguish usage scenarios
- V-for traversal must include a key, preferably an ID value, and do not use v-if at the same time
- Big data list and table performance optimization – virtual list/virtual table
- To prevent internal leaks, destroy global variables and events after component destruction
- Lazy loading of images
- Route lazy loading
- The introduction of third-party plug-ins on demand
- Use the keep-alive cache component as appropriate
- Anti – shake, throttling application
- Server render SSR or prerender