vue high frequency interview questions

Keywords: Vue

1. Why is data a function and returns an object?

The reason why data is only one function is that a component may call multiple times, and each call will execute the data function and return a new data object. In this way, data pollution between multiple calls can be avoided.

2. What are the value transfer methods between components?

The parent component passes the value to the child component, and the child component receives it using props
The child component passes the value to the parent component, and the child component uses the $emit + event to pass the value to the parent component
In the component, you can use $parent and $children to obtain parent component instances and child component instances, and then obtain data
Using $attrs and $listeners, it is convenient to transfer values when re encapsulating some components, such as a - > b - > C
Use $refs to get the component instance, and then get the data
Using Vuex for status management
Use eventBus to trigger events across components, and then transfer data
Using provide and inject, we are officially advised not to use this. I found a lot of use when looking at the ElementUI source code
Use the browser to cache locally, such as localStorage

3. What are the routing modes? What's the difference?

hash mode: trigger the hashchange event by changing the content behind the # number to realize route switching
history mode: switch URLs through pushState and replaceState to trigger the pop state event and realize route switching. nginx configuration is required for online

4. How to deal with data that does not require response?

In our Vue development, there will be some data that have not been changed from beginning to end. Since this dead data does not change, it does not need to be processed responsively. Otherwise, it will only do some useless work consumption performance, such as some write dead drop-down boxes, write dead grid data, and these dead data with a large amount of data. If they are processed responsively, That consumes a lot of performance.

// Method 1: define data outside data
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// Method 2: Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

4. Parent child component life cycle sequence

Parent beforecreate - > parent created - > parent beforemount - > child beforecreate - > child created - > child beforemount - > child mounted - > parent mounted

5. Why not use index as key and random number as key?

for instance:

<div v-for=(item, index) in list :key=index>{{item.name}}</div>

list: [
    { name: 'Xiao Ming', id: '123' },
    { name: 'Xiao Hong', id: '124' },
    { name: 'floret', id: '125' }
]

Render as
<div key=0>Xiao Ming</div>
<div key=1>Xiao Hong</div>
<div key=2>floret</div>

Now I execute list.unshift({ name: 'Kobayashi', id: '122' })

Render as
<div key=0>Kobayashi</div>
<div key=1>Xiao Ming</div>
<div key=2>Xiao Hong</div>
<div key=3>floret</div>


Comparison between old and new

<div key=0>Xiao Ming</div>  <div key=0>Kobayashi</div>
<div key=1>Xiao Hong</div>  <div key=1>Xiao Ming</div>
<div key=2>floret</div>  <div key=2>Xiao Hong</div>
                         <div key=3>floret</div>

It can be seen that if you use index do key In fact, the original three items are updated and florets are added. Although the rendering purpose is achieved, the performance is lost

Now we use id Do it key，Render as

<div key=123>Xiao Ming</div>
<div key=124>Xiao Hong</div>
<div key=125>floret</div>

Now I execute list.unshift({ name: 'Kobayashi', id: '122' })，Render as

<div key=122>Kobayashi</div>
<div key=123>Xiao Ming</div>
<div key=124>Xiao Hong</div>
<div key=125>floret</div>

Comparison between old and new

                           <div key=122>Kobayashi</div>
<div key=123>Xiao Ming</div>  <div key=123>Xiao Ming</div>
<div key=124>Xiao Hong</div>  <div key=124>Xiao Hong</div>
<div key=125>floret</div>  <div key=125>floret</div>

It can be seen that the original three items remain unchanged, but Kobayashi is added, which is the most ideal result

Using index is the same as using random numbers. Random numbers change every time. They are not specific. They are very scum men and consume performance. Therefore, refuse scum men and choose honest people

6. data-v-xxxxx is found when reviewing the element. What is this?

This is generated by using the scoped tag when marking css in vue files. To ensure that the css in each file does not affect each other, each component is uniquely marked. Therefore, a new 'data-v-xxx' tag will appear every time a component is introduced

7. Use of Vue hook

1. How to use the timer

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //Specific implementation contents
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

The bad thing about the above method is that you have to define a timer variable globally. You can use hook to do this:

export default{
  methods:{
    fn(){
      const timer = setInterval(()=>{
        //Specific execution code
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}
//$once is a function that can bind a custom event to a Vue component instance, but the event can only be triggered once and then removed.

2. If the child component needs to trigger a function of the parent component when mounted, it will be written as follows:

//Parent component
<rl-child @childMounted=childMountedHandle
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// Subcomponents
mounted () {
  this.$emit('childMounted')
},

It is more convenient to use hook:

//Parent component
<rl-child @hook:mounted=childMountedHandle
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

8. Have dynamic instructions and parameters been used?

<template>
    ...
    <aButton @[someEvent]=handleSomeEvent() :[someProps]=1000 />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? click : dbclick,
      someProps: someCondition ? num : price
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

Posted by s2j1j1b0 on Tue, 21 Sep 2021 20:05:23 -0700

Programmer Group