Vue often tests knowledge points

What is the difference between watch and computed and methods?

Methods are methods, computed is a calculated attribute, and watch is a listening attribute

1. computedandmethods: The biggest difference is thatcomputedThere is a cache, ifcomputedIf the dependent attribute does not change, the calculation will not be recalculated, andmethodsEach call is recalculated
2. watchandcomputed: The biggest difference is thatcomputedIs to compute a property, andwatchYou can do other things, such as reporting a piece of data to make it bidirectional

What lifecycle hook functions does Vue have? What’s the use of separation?

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

(1) What is the life cycle?

A Vue instance has a full life cycle, that is, from the beginning to create, initialize data, compile templates, mount Dom -> render, update -> render, uninstall, etc. This is called the Vue life cycle.

(2) The role of each life cycle

(3) Schematic diagram of life cycle

How does Vue communicate between components?

$listeners/tools 2.$listeners/listeners 3. Vuex 4.$attrs/$listeners 5Copy the code

Communication between Vue components is one of the most frequently examined knowledge points in an interview. Vue component communication refers only to the following three types of communication: parent-child component communication, intergenerational component communication, and sibling component communication. Each of these communication modes is described below and which types of component communication this method can be applied to.

(1) Props / $emit applies to parent-child component communication

This method is the basis of the Vue component, and I believe most of you have heard of it, so I will not introduce it here with examples.

(2) ref and $parent / $children are suitable for parent-child communication

• refIf used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference refers to the component instance
• $parent / $children: Accesses the parent/child instance

(3) EventBus ($emit / $ON) is suitable for parent-child, next-generation, and sibling communication

This approach uses an empty Vue instance as the central event bus (event hub), which triggers events and listens for events to communicate between any component, including parent, generational, and sibling components.

$listeners are suitable for intergenerational component communication

• $attrs: contains property bindings (except class and style) in the parent scope that are not recognized (and retrieved) by prop. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and the internal component can be passed in via v-bind=”$attrs”. Often used in conjunction with the inheritAttrs option.
• $listeners: contains a V-ON event listener in the parent scope (without the.native modifier). It can be passed into internal components via V-on =”$Listeners”

(5) Provide/inject is applicable to communication of alternate generation components

The ancestor component provides variables through provider, and the descendant component injects variables through Inject. Provide/Inject API mainly solves the communication problem between cross-level components, but its usage scenario is mainly that sub-components obtain the state of the upper level components, and a relationship between active provision and dependency injection is established between cross-level components.

(6) Vuex is suitable for father-son, intergenerational and sibling component communication

Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in an application.

• Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.
• The only way to change the state in a store is to commit mutation explicitly. This makes it easy to track changes in each state.

How does Vue data responsiveness work?

Description of responsive system:

• Any Vue Component has a corresponding Watcher instance
• Properties on Vue’s data are added with getter and setter properties

• When the Vue Component render function is executed, the data is touched, the getter is called, and the Vue records all the data that the Vue Component depends on. (This process is called dependency collection)
• When data is modified (mostly by user actions), i.e. written, setter methods are called, and Vue notifys all components that depend on the data to call their render function to update it.

What is vue.set used for?

Since Vue cannot directly detect the addition or modification of attributes inside the object, it is necessary to manually call Vue. Set or this.$set in order to achieve two-way binding of data

How do you use the Vuex?

Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in an application.

(1) The state storage of Vuex is responsive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

(2) The only way to change the state in a store is to explicitly commit mutation. This makes it easy to track changes in each state.

It mainly includes the following modules:

• State: Data structure that defines the State of the application, where the default initial State can be set.
• Getter: Allows the component to get data from the Store. The mapGetters helper function simply maps the getters in the Store to local computed properties.

• Mutation: is the only method that changes the state in the store, and must be a synchronization function.
• Action: Used to commit mutation rather than directly change the state, and can include any asynchronous operation.

• Module: Allows you to split a single Store into multiple stores and Store them simultaneously in a single state tree.

How did you use the VueRouter?

VueRouter is an official route manager for vuue. js

There are several core concepts in VueRouter, such as History mode/navigation guard/route lazy loading etc

1. The History mode: VueRouter by defaultHash pattern.Hash patternandThe History modeThe most intuitive difference is that there is no belt in the URL#If there is oneHash patternOtherwise, it isThe History mode, butThe History modeBack-end support is required.
2. Navigation guardNavigational guards are hook functions that do something while routing jumps.

3. Route lazy loading:const Foo = () => {import(',./Foo.vue')}

Common apis are:

1. router-link: Where to jump to
2. router-view: Where to display

3. this.$router.push(): Enables route redirection
4. this.$router.replace(): is similar to this.$router.push(), except that it does not add a new record to history

5. this.$router.params(): dynamic route matching

Redirection: Redirect to/B when the user accesses /a

const router = new VueRouter({
	routes:[
    {path:'/a', redirect:'/b'}
  ]
})
Copy the code

Alias: If the alias of /a is /b, then when the user accesses /b, the URL still remains /b, but the route actually matches/A

const router = new VueRouter({
	routes:[
    {path:'/a', component:A, alias:'/b'}
  ]
})
Copy the code

What is a route guard?

Simply put, a route guard is a hook function that does something during a route jump.

Route guard can be divided into three types: global route guard, component route guard, and single route guard.

1. global: Refers to the direct operation of the hook function on the routing instance, which is triggered by all routing configured components

1. beforeEachTriggered before route redirection
2. beforeResolveandbeforeEachSimilarity, difference isbeforeResolveIs in thebeforeEachAnd components within thebeforeRouteEnterAfter that,afterEachBefore the call

3. afterEachTriggered after the redirect is complete

2. In the component: Indicates that a hook function is executed within a component, which is equivalent to adding a lifecycle hook function to the component configured for routing

1. beforeRouteEnterThis hook is called before the route is enteredbeforeEachandbeforeEnterAfter that,beforeResolveandafterEachWas called before, which means he was called beforebeforeCreateIt would have been triggered before
2. beforeRouteUpdateCalled when the current route changes and the component is reused, the instance can be accessed through this

3. beforeRouteLeaveCalled when the navigation leaves the component’s route and can be accessed through this

3. Exclusive routing: Indicates that the hook function can be configured for a single route

1. beforeEnterandbeforeEachExactly the same, if both are set at the same time, then it will be inbeforeEachAfter the implementation

Conclusion:

When the switch route is clicked, the hook functions are executed in the following order

1. beforeRouteLeave
2. beforeEach

3. beforeEnter
4. beforeRouteEnter

5. beforeResolve
6. afterEach

7. beforeCreate
8. created

9. beforeMount
10. mounted

11. Next callback to beforeRouteEnter