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 ofEach entry in the array is not intercepted by defineProperty for performance reasonsIt’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,$emitIt’s publish-subscribe based, maintains an event center,$onThe event is stored in the event center by name, called subscriber, and then$emitPublish 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:

  1. Navigation is triggered.
  2. Called in a deactivated componentbeforeRouteLeaveThe guards.
  3. Call globalbeforeEachThe guards.
  4. Called in a reused componentbeforeRouteUpdateGuard (+ 2.2).
  5. Called in the routing configurationbeforeEnter.
  6. Parse the asynchronous routing component.
  7. Called in the active componentbeforeRouteEnter.
  8. Call globalbeforeResolveGuard (+ 2.5).
  9. Navigation confirmed.
  10. Call globalafterEachHook.
  11. Trigger a DOM update.
  12. callbeforeRouteEnterThe 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 moduleandAdd 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