Vue comprehensive interview questions

1. What are the common commands of Vue and what are their uses

1. v-if: Render elements according to the value of true or false, and create or destroy elements when the value changes
2. v-show: switch the display and hiding of elements according to the value of true or false, and will not destroy elements
3. v-for: Render a list based on an array or object, vue2.0 or above must be used with: key
4. v-bind: dynamically bind one or more features, abbreviated as:
5. v-on: used to listen to the dom event of the specified element, bind the event listener, which can be abbreviated as @
6. v-model: Realize two-way data binding of data
7. v-pre: Skip the compilation process of this element and its child elements
8. v-once: Only render elements and components once. Subsequent re-renders, the element/component and all its children will be considered static content and skipped. This can be used to optimize update performance.

1. The principle of two-way data binding

Using data hijacking combined with the publisher-subscriber model,

Hijack the setter and getter of each property through Object.defineProperty(),

Publish messages to subscribers when data changes, and trigger corresponding listener callbacks.

1. What are the ways to jump and pass parameters in the route?

Declarative jump:

1) Jump by path

<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">Click to view the subpage</router-link>

2) Jump by route name

<router-link :to="{name: 'detail', params:{id: 'abc'}}">Click to view the subpage</router-link>

  Functional jump:

  this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})

  Pass parameter method:

         Params传参：this.$router.push({ name:'user',params: { userId: 123 }})

Named route, params must be used with name

                          Query parameter: <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">Click to view the subpage</router-link>

1. What are the communication methods between components?

From father to son:

Custom parameters in the parent component

<counter-com :num="10" str="abc"></counter-com> 

Subcomponents accept parameters

props:{

        "num":{type:Number,default:1},

}

         Child father:

                  Custom event in parent component

                  <counter-com  @setNum=”setNum”></counter-com>

                  Methods:{

                  setNum(data){

                  console.log(data)

}

}

                  Subcomponents trigger events through the $emit method

                  This.$emit(“setNum”,{name:”123”})

         Pass parameters through vuex

         Pass parameters through the event bus

1. Talk about the understanding of routing guards (talking about understanding, generally it is the total score, what it is, where it is used, what is it used for, how to use it, what precautions, combined with the project description is better)

Routing guard, also known as navigation guard, is a hook function triggered when routing jumps. It can perform operations such as interception and cancellation of routing. It is divided into global routing guards, component routing guards and routing exclusive guards. It is mainly used for Authorization authentication of some pages, by confirming the login information to determine whether to allow or block,

1. router.beforeEach((to,from,next)=>{
2.   if(to.path == '/login' || to.path == '/register'){
3.     next();
4.   }else{
5.     alert('You are not logged in, please log in first');
6.     next('/login');
7.   }
8. })

1. Talk about the understanding of Vuex

Vuex is a state management mode + library. It manages the common state of all components. When the nesting of components is too deep and it is difficult to pass values, you can use vuex to manage the public state. For example, you need to agree to confirm the login state hour.

There are five modules State Getter Mutation Action Module in vuex

1) The data is defined in the state, which can be called in any component

this.$store.state.global data name

2) Mutation is  the only way to change the state in the store . Use commit to trigger the Mutation operation in the build . It cannot perform asynchronous operations

3) Action is a module that performs asynchronous operations, but it can only change the state in state by triggering mutation

this.$store.dispatch("asynAdd")

4) The getter is similar to computed in vue, caches, and processes the data in the Store to form new data

5) modules, when the amount of data is large, vuex will appear very bloated, so we can use modules to carry out modular segmentation, each module has a separate state, mutation, action, getter and module

1. Talk about the understanding of mixing

Mix in mixins, mixins is a js object, it can contain any function options in the script item in our component, when the component uses the mixins object, all the options of the mixins object will be mixed into the options of the component itself, which can improve the code Reusability, making the code easy to maintain.

When we have data or functions in multiple components that are very similar, we can use mixins to extract the common parts, and the components call them through the functions encapsulated by mixins.

When the mixed-in value or option conflicts, the value of the component itself will override the mixed-in value, and the mixed-in option will be called earlier than the option of the component itself

1. Talk about the understanding of slots

When the component is encapsulated, the uncertain part can be encapsulated as a slot, and then determined when calling. The slot is divided into a named slot and an anonymous slot. When defining an anonymous slot, only need to define <slot></ slot>, when used, the value in the component will be passed into the slot.

<template>

  <div class="about">

    <h1>This is an Children page</h1>

    <!-- Define a default slot -->

    <slot></slot>

  </div>

</template>

When there is more than one slot in the component, you must use a named slot and use name to specify the name

<template>

  <div class="about">

    <h1>This is an Children page</h1>

    <!-- Add a name attribute to the slot, which is the so-called named slot -->

    <slot name="one"></slot>

    <slot name="two"></slot>

  </div>

</template>

<template>

  <div class="about">

    <h1>This is an Parent page</h1>

    <children>

      <template v-slot:one>

        <p>one slot</p>

      </template>

      <template v-slot:two>

        two slots

      </template>

    </children>

  </div>

</template>

1. What is cross-domain and how to solve it

The same-origin policy of the browser stipulates that the interaction of js can only be in the same domain. When any of the protocol, domain name, and port of a request url is different from the current page url, it is cross-domain

Solution: Bypassing the browser's same-origin policy by configuring a proxy

1. Talk about the experience of packaging requests

Encapsulate axios in the promise object, and encapsulate the required request configuration consent in the method. After calling the request method, it can be used very conveniently, saving a lot of code, without redundant operations, making the code clean and easy to maintain. Improved readability and reusability, in line with the characteristics of high cohesion and low coupling