Collection of Vue interview questions

1. Why is the data in Vue a function and not an object?

Because components are used for reuse , and JS objects are reference relationships , if the data in the component is an object, then the scope is not isolated , and the data values ​​​​in the component will affect each other; if the data in the component is a function, then each instance An independent copy of the returned object can be maintained, and the data values ​​​​between component instances will not affect each other.

Vue instances are not reused, so there is no problem with referencing objects .

2. The difference between v-if and v-show

1. Common ground

Both v-if and v-show can dynamically display DOM elements

2. Differences

  (1) Means:

         v-if is to dynamically add or delete DOM elements to the DOM tree;

         v-show is to control the display and hiding by setting the display style attribute of the DOM element ;

(2) Compilation process:

         v-if switching has a partial compilation/unloading process, which properly destroys and rebuilds internal event listeners and

        Subassembly;

         v-show is just a simple css-based switch ;

(3) Compilation conditions:

         v-if is lazy and does nothing if the initial condition is false;

         Partial compilation starts only when the condition becomes true for the first time (

         Compilation is cached? After the compilation is cached, it will be partially unloaded when switching);

         v-show is compiled under any condition (whether the condition is true for the first time), and then cached,

         And the DOM element remains;

(4) Performance consumption:

         v-if has a higher switching cost ;

         v-show has a higher initial rendering cost ;

(5) Usage scenarios:

         v-if suitability for operating conditions is unlikely to change;

         v-show is suitable for frequent switching. 

3. Advantages of Vue over jQuery in development

vue: is a streamlined MVVM , from a technical point of view. Vue.js focuses on the ViewModel layer of the MVVM model. It connects the view and the Model layer through two-way data binding , and the rendering of the page view can be completed through the operation of the data.

The difference between vue and jQuery:

①Comparison between vue and jQuery jquery uses selector () to select DOM objects , and performs operations such as assignment, value retrieval, and event binding on them. In fact, the difference from native HTML is that DOM objects can be selected and manipulated more conveniently , while data together with the interface.

②For example, you need to get the content of the label tag: ("label").val(), which still depends on the value of the DOM element;

Vue completely separates data and View through Vue objects.

③ It is no longer necessary to refer to the corresponding Dom elements for data operations. It can be said that data and view are separated , and they are bound to each other through the vm of the view object.

4. Understanding of Vue components (component)

Vue components are some public components composed of html, js, css ,

1. Small size and reusable

2. Reduce the amount of code

3. Improve development efficiency

5.watch monitors the changes of two values ​​at the same time and executes the method

data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    return {
      city,
      country
    }
  }
},
watch: {
  address: {
    handler: function(newval , oldval) {
      console.log('address new =:' + newval );
      console.log('address old =:' + oldval );
    },
    immediate: true,
    deep: true // true表示可以监听对象中的属性变化
  }
}

immediate : Indicates whether to execute the handler when the watch is bound for the first time. If the value is true, it means that the handler method will be executed immediately when it is declared in the watch. If the value is false, it will be the same as the general use of the watch. When the data changes only to execute

deep : When it is necessary to monitor the changes of an object, the ordinary watch method cannot monitor the changes of the internal properties of the object. Only the data in data can monitor the changes. At this time, the deep property is required for deep monitoring. Set deep: true, when When the object has many attributes, each attribute change will execute the handler

6. The difference between watch and computed

1. The computed get must have a return value (return), and the return in the watch is optional
2. Computed supports caching . Only when the dependent data changes, will it recalculate, while watch does not support caching. If the data changes, it will directly trigger the corresponding operation.
3. Computed can customize the name, while watch can only monitor the attributes with the same name as data
4. Computed does not support asynchronous . When there are asynchronous operations in computed, it is invalid and cannot monitor data changes, while watch supports asynchronous
5. Computed attribute values ​​will be cached by default . Computed attributes are cached based on their responsive dependencies, that is, calculated values ​​based on the data declared in data or passed by the parent component in props, and the watch function accepts two parameters, the first is the latest value, the second is the value before the input
6. If an attribute is calculated from other attributes, this attribute depends on other attributes, many-to-one or one-to-one, generally use computed, when an attribute changes, you need to perform the corresponding operation, one-to-many, generally use watch
7. computed starts to monitor when it loads for the first time by default ; watch defaults to not monitor when loading for the first time , if you need to monitor for the first load, add the immediate attribute and set it to true (immediate: true)
8. Computed is suitable for complex calculations, while watch is suitable for some consumable functions. Use scenarios: computed----when an attribute is affected by multiple attributes, use computed----shopping cart product settlement. watch---------When one piece of data affects multiple pieces of data, use watch------search box.

7. Vue life cycle 

​​​​​​​

 From the first and second points, we can know that the initialization of data is completed when the data observer is created, and such as methods, computed attribute props, etc. have been initialized; then the problem comes,

What is the order in which data props computed watch methods are generated between them?

According to looking at the source code of vue: props => methods => data => computed => watch ;

​​​​​​​