Any misunderstandings are welcome.
1. What do you make of the statement that Vue is an incremental framework?
A: Vue is incremental, in the sense that it incrementally adds the functionality you want, and it’s a lightweight view with no strong arguments compared to Angular and React.
2. What are the two cores of Vue?
A: Data-driven and componentized.
(1) Data-driven is ViewModel, which keeps data and view consistent.
(2) Componentization can improve the reusability of code and reduce the coupling degree of code between modules.
3. Why does Vue manipulate the virtual DOM?
A: The virtual DOM is an object that describes the real DOM. A real DOM has so many properties on it that it can be very difficult to manipulate. In order to reduce DOM operations, we recorded the DOM to be updated during the update, then updated the DOM to be updated, and finally updated the DOM according to the diff algorithm comparison. (The diff algorithm in vUE is horizontal comparison.) The virtual DOM is independent of the real platform environment and can be implemented across platforms.
4. How does template compilation work in Vue?
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.
5. What is the principle of responsive data?
A: Reactive is when the data changes, the view can also 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.
6. 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.
7. What are the steps of Vue’s bidirectional binding?
Observer hijacks and listens for all attributes and notifies Watcher if any changes are made.
(2) Watcher (subscriber), receives notification of property changes and executes corresponding functions to update the view.
(3) Compile (parser), parse the template instructions, and replace the template data, according to the template data to initialize the corresponding subscriber.
How are Vue lifecycle hooks implemented?
A: Vue’s lifecycle hook is 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.
What are Vue’s lifecycle hook functions? (vue2.0)
A:
(1) Life cycle functions during creation:
BeforeCreate () : At this point, 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.
(2) Life cycle function during operation:
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.
(3) Life cycle function during destruction:
BeforeDestroy () : At this point, the instance’s methods, directives are still available, called before the instance is destroyed.
Destroyed () : All instructions, bindings, and listeners on the vue instance are destroyed, as well as all subinstances.
Name at least four Vue commands and their usage
A:
(1) V-bind
(2) V-ON (Event binding)
(3) V-Model (Two-way data binding)
(4) V-for (traversal)
(5) V-if (Judge whether to hide)
11. Which has a higher priority, V-for or V-IF?
A: V-for has a higher priority than V-IF.
12. What’s the difference between V-IF and V-show?
Answer: Both of these instructions determine whether the DOM node is displayed.
The difference is:
(1) Implementation method: V-if directly deletes or reconstructs element nodes from the DOM tree according to the true or false values of the following data. V-show simply modifies the display attribute value of the element, which is still in the DOM tree.
(2) Compilation process: V-IF switching has a partial compile/uninstall process, during which internal events and sub-components are properly destroyed and rebuilt; V-show is simply a CSS-BASED switch;
(3) compile conditions: v-if is lazy, if the initial condition is false, do nothing; Partial compilation occurs when the condition first becomes true; V-show is compiled under any conditions, and DOM elements are always preserved;
(4) Performance consumption: V-IF has higher switching consumption and is not suitable for frequent switching; V-show has a higher initial render cost and is good for frequent switching;
13. Can V-ON listen for multiple methods?
A: Yes, write the following code
<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">
14. What are the common modifiers of Vue?
Answer: Vue modifiers are:
(1) Event modifier
.stop: same as event.stopPropagation() in native JavaScript to prevent event bubblings
.prevent: As in native JavaScript event.preventDefault(), prevent the default event
.capture: In contrast to the direction of event bubbling, events are captured from the outside in
.self: fires only events in its own scope, no child elements
.once: Triggers only once.
(2) Key modifier
.delete captures the Delete and backspace keys
V - on: keyup. XXX = "yyy" < input @ keyup. Delete = "onKey" / >
(3) System modifiers
.ctrl.alt.shift.meta These modifiers trigger mouse or keyboard events by pressing the corresponding key
How does a Vue subcomponent call a method in its parent component?
A:
(1) Call the parent component’s method directly in the child component with this.$parent.
(2) Emit an event from $emit to the parent component. The parent component listens for this event.
How does a parent component call a method in a child component in Vue?
A:
The parent component manipulates the child component methods using the REF property.
The parent component:
<child ref="childMethod"></child>
Copy the codeChild components:
test() {
console.log('hello')}Copy the codeCall the child’s test method from the parent:
this.$refs.childMethod.test()
Copy the code17. How to pass parameters between Vue components?
A:
(1) Use prop to pass parameters
The first step is to dynamically bind the property in the parent component (note: this property needs to be declared in data)
<parent :dataList='dataList'></parent>
Copy the codeIn the second step, define the props to receive the dynamically bound property props: [‘dataList’] Note: Props can also be defined as an object
props: {
id: String.formData: {
type: Object.default: () = > {},
required: false,},formBpm: {
type: Boolean.default: false.required: false,},Copy the codeTo get properties and methods in a child component, use: this.$parent. Property name or this.$parent. Method name.
(2) Use ref to pass parameters
The ref attribute is bound when a parent component calls a property or method of a child component
<parent :ref='parent'></parent>
Copy the codeUse the this.$refs.parent property name or this.$refs.parent in the parent component. If you bind to a component and point to the component instance, use $ref to get properties and methods defined on the component. If ref is bound to the DOM, it refers to the DOM element, and $ref is used to retrieve the element’s attributes.
(3) Use emit to pass parameters
This.$emit(method name, parameter) is used by the child component to communicate with the parent component. The $emit method is bound to a custom event event, which is passed to the parent component when the code statement is normally executed. The parent component listens for and receives passed arguments via @Event
(4) Value transmission by other methods
① Route forwarding parameter, vue-router.
② Local cache, localStorge.
③ Use vuEX data management to transfer parameters.
What is the difference between prop and REF?
A: Prop cannot invoke properties and methods of child components, and is mainly used for passing data. Refs are primarily used to invoke properties and methods of child components and are not good at passing data.
19. How to define a 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' // :id is the parameter passed
name: 'Test'
components: Test
}
Copy the codeWhen rendering /test routes, the id parameter will be placed in this.$route.params. This.$route.params.id can be accessed dynamically.
What is the difference between $route and $router
(1) $route is the route object to which the routing information object is reconnected. Every route has a route object, which is a local object, including path, Params, Hash, Query, fullPath, matched, name and other routing parameters.
$router = VueRouter; $router = VueRouter; $router = VueRouter;
21. How does vue-router pass parameters?
A:
(1) Using Params: parameters will not be displayed on the path, the browser forced refresh parameters will be cleared
// Pass parameters
this.$router.push({name:" demo".params: {id:111}})
// Receive parameters
this.$router.params.id
Copy the code(2) Use Query: Parameters will be displayed on the path and will not be cleared when refreshing
// Pass parameters
this.$router.push({path: '/demo'.query: {id:111}})
// Receive parameters
this.$router.params.id
Copy the codeNote: Name is used with Params and Query is used with PATH
22. How does vue-Router respond to changes in routing parameters?
A:
(1) Use watch to monitor the $router object.
watch: {
$router(to, from) {
// Respond to routing changes}}Copy the code(2) Use navigation guard, component beforeRouteUpdate(to,from,next) navigation hook function.
beforeRouteUpdate(to,from,next) {
// Respond to routing changes
}
Copy the codeWhat is navigation guard?
A: Navigation guard (route guard), which can be understood as route interception, is used to determine whether users are logged in, whether they have permission to browse, etc.
What kinds of navigation guards are there?
A:
(1) Global guard: keep up with the beforeEach equivalent of an entrance to a building that requires going through security. You need to know where you’re from and where you’re going.
router.beforeEach((to, from, next) = >{
console.log(to) // Which page to jump to
console.log(from) // Which page to jump from
})
Copy the code(2) Component navigation guard: beforeResolve
(3) Exclusive guard: beforeEnter
How it works: When a navigation is triggered, global guards are called in turn (asynchronously). The navigation waits until all guards resolve. Each guard method takes three arguments: to, from, and next to: the destination route object to enter from: the current navigation route to leave next: is a callback function that must be called to resolve the hook. Explaining next:
(1) Next (false): interrupts current navigation. If the user manually clicks the back button of the browser, the URL will change and the URL will find the address corresponding to from.
(2) next(‘/’) or next({path: ‘/’}): jump to a different address. The current navigation is interrupted and a new navigation is performed.
(3) Next (error): If the argument passed to Next is an error, the navigation is terminated.
25. What is the implementation principle of nextTick in Vue?
A: The callback function in nextTick is executed after the next DOM update, delaying the callback and preventing multiple updates. (Inside nextTick is a promise.)
26. What is the function of the keep-Alive built-in component?
A: 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.
27, How to interpret vue.set method? How to use it?
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.
// Array of operations:
this.$set(arr, index, val)
// Examples of operation objects:
this.$set( obj, key, val)
Copy the code28. 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’s disadvantages: dependency issues, naming issues, data cannot be shared, data sources, etc.
29. What is the function of key value in VUE?
A: The key is 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.
30. Why must data be a function in a Vue component?
A: In New Vue(), data can be operated on as an object. In Component, data can only exist as a function and cannot be assigned to data directly. When data is a function, each instance can maintain a separate copy of the returned object, and the data in each instance is independent and does not affect each other.
31. What about the dynamic components of VUE?
A: Multiple components switch components through the same mount point. If the value of IS is the name of the component, the page will display the component.
32. How are array changes detected in VUE?
A: Vue rewrites the methods on the array prototype, changing methods like push, Shift, POP, splice, unshift, sort, reverse, etc., all of which can change the array’s original 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.
How to use recursive components?
A: In export default, the name attribute is required. Recursive components can only operate through the name attribute. Note: Recursive components must have an end condition or they will overflow the stack. You can add V-if =”false” as the end condition for recursive components.)
34. Should AJAX requests in vue.js be placed in component methods or vuex actions?
A:
(1) 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 it is reused elsewhere, you can put the request in an action, wrap it as a promise return, and process the returned data with async await at the call location.
35. What is Vuex? When should we use Vuex? What are the benefits of using Vuex?
A:
(1) Vuex is a state management mode developed specifically for Vue applications. It enables data sharing of the global state of components.
(2) Vuex can be used when developing a large and medium-sized single-page application and data sharing between components is required.
(3) Vuex can centrally manage shared data, making it easy to develop and maintain later. It can efficiently realize data sharing between components and improve development efficiency. And the data stored in Vuex is responsive, keeping the data consistent with the page.
What are the problems if I don’t use Vuex?
A:
(1) When Vuex is not used, it is very troublesome to share data in a large range and frequently. When changing data, there are many components involved and many places to maintain, which reduces maintainability.
(2) As the source of data is not clear, the readability of the code is reduced.
(3) Increased coupling between components, which contradicts the original design of Vue.
37. What are the key concepts of VUEX?
Answer: State, Mutation, Action, Getter
(1) State is used to provide a unique public data source, and all shared data should be stored in the State of store. State is similar to data in Vue, which stores data sources. But the data in State is reactive. If the data in State changes, all components that depend on that data are updated.
// Create a store that provides unique public data
const store = new Vuex.Store({
state: { // The data in the state object is the data that needs to be shared globallyData name: value,}})// Method 1 when a component needs to access data in State:
this. $store. State. Data// Method 2 when a component needs to access data in State:
// First import the mapState function as needed
import { mapState } from 'vuex'
// Map global data to computed
computed: {
...mapState(['Data name'])}Copy the codeVuex does not allow components to modify global data directly via this.$store.state. Mutation is used to change data in the Store, and only Mutation can change data in the Store. This allows for centralized management of changes to all data.
/ / define Mutation
const store = new Vuex.Store({
state: { // The data in the state object is the data that needs to be shared globallyData name: value,}, mutations: {event name (state) {// We need to pass a state argument
// How to change dataState. Data name + what you want to do next}}})// Call Mutation method 1 in the component:Methods: {demo() {
this.$store.commit('Event name')}}// Call Mutation method 2 in the component:
// Import the mapMutation function as required
import { mapMutation} from 'vuex'
// Map the mutations function to methods
methods: {
...mapMutation(['Event name'])}Copy the code(3) Action It is used to process asynchronous tasks, can carry parameters in asynchronous tasks. If an asynchronous operation needs to change data, you must use Action instead of Mutation directly. In fact, the Action also needs to start Mutation to change the data indirectly.
/ / define the Action
const store = new Vuex.Store({
state: { // The data in the state object is the data that needs to be shared globallyData name: value,}, mutations: {event name (state) {// We need to pass a state argument
// How to change dataState. Data name + what you want to do next}},actions: {
async(parameter){parameter. Commit ('Event name')}}})// Call Action method 1:Methods: {demo() {
this.$store.dispatch('async')}}// Call Action method 2:
// First import mapActions functions as needed
import { mapActions } from 'vuex'
// Map actions functions to methods
methods: {
...mapActions(['async'])}Copy the code(4) Getter it is used to process the data in Store and form new data. It’s like computed in Vue. If the data in the Store changes, the data in the Getter changes as well.
/ / define Getter
const store = new Vuex.Store({
state: { // The data in the state object is the data that needs to be shared globallyData name: value,},getters: {demo: state => {// The operation you want to do}}})// Call getter method 1:
this.$store.getters.demo
// Call getter method 2:
// First import the mapGetters function as needed
import {mapGetters} from 'vuex'
// Map getters to methods
computed: {
...mapGetters(['demo'])}Copy the code