The difference between v-if and v-show

• v-if controls the explicit and implicit of elements by controlling the existence of dom nodes;
• v-show sets the display style of DOM elements. block is displayed and none is hidden;

Why use key in v-for

When v-for updates the rendered element queue, it will judge whether a value has been modified according to the key value. If it is modified, the item will be re rendered. If it is not modified, the previous element will continue to be reused, and the element without the key will be removed.

life cycle

Describe vue life cycle (with parent-child components)

Load Render Pass

father beforeCreate->father created->father beforeMount->son beforeCreate->son created->son beforeMount->son mounted->father mounted

Update process

father beforeUpdate->son beforeUpdate->son updated->father updated

Destruction process

father beforeDestroy->son beforeDestroy->son destroyed->father destroyed

How do vue components communicate

Parent to child value: the parent component uses the v-on method to pass, and the child component uses props to receive. (the child component cannot modify the value received from the parent component)
Child to parent value: the child component uses this$ Emit() passes a value to the parent component, which uses v-on to listen for events (in the form of events)
Method of parent component calling child component: use $ref
Method of calling parent component by child component: simultaneous interpreting value

vue's prop is a one-way downlink binding: the update of the parent's prop will flow to the child component, but the reverse is not possible. Sometimes we need to modify the data value in the parent component synchronously. sync is the syntax sugar used for "two-way binding" in vue.

<text-document :title.sync="doc.title"></text-document>
//When the sub component needs to update the value of title, it needs to explicitly trigger an update event:
this.$emit('update:title', newValue)

$emit/$on uses it to trigger and listen to events, cleverly and lightly realizing the communication between any component, including parent-child, brother and cross level

var Event=new Vue();
Event.$emit(Event name,data);//trigger
Event.$on(Event name,data => {});//monitor

Describes the component rendering and update process

Implementation principle of bidirectional data binding v-model

MVVM and MVC

• Model: responsible for fetching data from the database
• View: the place responsible for displaying data
• Controller: where users interact, such as click events, etc
• Idea: the Controller displays the data of the Model on the View
  
  MVVM
• VM, that is, the view model, does two things: one is to turn the model into a view, and the implementation method is two-way data binding; Second, the view is transformed into a model, and the implementation method is DOM event listening.
• Idea: it realizes the automatic synchronization between View and Model, that is, when the attributes of Model are changed, we no longer need to manually operate Dom elements to change the display of View, but the display of View layer corresponding to the attribute will change automatically after changing the attribute (corresponding to Vue data-driven idea)
  
  difference:
  On the whole, MVVM is much simpler than MVC. It not only simplifies the dependence on business and interface, but also solves the problem of frequent data updates. There is no need to operate DOM elements with selectors. Because in MVVM, the View does not know the existence of the Model, and the Model and ViewModel do not observe the View, this low coupling mode improves the reusability of the code

vuex

1. vuex five core attributes?
   state,getter,mutation,action
2. When the state in Vuex is an object, what should we pay attention to when using it?
   Because the object is a reference type, changing the attribute after copying will still affect the original data, which will change the state in the state. It is not allowed, so use deep cloning to copy the object first, and then modify it.
3. Getters are equivalent to wrappers. They do not modify the original data, but only wrap the original data. Mutation must be an internal synchronization function. action submits mutation instead of directly changing the state, which can be asynchronous.
4. How to register a global action in a module with a namespace?

 actions: {
    actionA: {
        root: true,
        handler (context, data) { ... }
    }
  }

1. How to submit mutationA in module a with namespace in modules in component?

   this.$store.commit('moduleA/mutationA',data)

Why are v-if and v-for not recommended for the same label?

In Vue, the priority of v-for is higher than that of v-if, which will lead to rendering useless nodes first and increasing useless dom operations.

What should I do with non responsive data?

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}),
    }
 }

What's the use of nextTick?

Vue adopts the strategy of asynchronous update. Generally speaking, if you modify multiple times in the same event loop, you will update the view once in a unified way, so as to save performance

What is Vue's SSR? What are the benefits?

• SSR is server-side rendering
• Developed based on nodejs serve service environment, all html codes are rendered on the server
• The data is returned to the front end, and then the front end is "activated", which can become the html code recognized by the browser
• SSR loads faster for the first time, has better user experience and better seo optimization, because the crawler can see the content of the whole page. If it is a Vue project, the data needs to be parsed, so the crawler will not wait for your data to be loaded. In fact, the seo experience of Vue project is not very good

How is Vue responsive implemented?

The overall idea is data hijacking + observer mode
Use object Defineproperty hijacks properties (only existing properties will be hijacked), and arrays are implemented by overriding array methods. When the page uses corresponding attributes, each attribute has its own dep attribute to store the watcher it depends on (dependency Collection). When the attribute changes, it will notify its corresponding watcher to update (distribute updates).

Are provide and inject responsive?

provide and inject are mainly used when developing high-level plug-in / component libraries. Not recommended for normal application code.

Usage scenario: because vue has $parent attribute, child components can access parent components. However, it is difficult for grandchildren to access ancestor components. Cross level access to the data of ancestor components can be easily realized through provide/inject

// Ancestor component
provide(){
    return {
   // Keyname: {Name: this. Name}, / / value is an object to implement a response, that is, a reference type
      keyName: this.changeValue // You can also use the function [note that the function here is regarded as value instead of this.changeValue()]
   // keyName: 'test' value if it is a basic type, the response type cannot be implemented
    }
  },
data(){
  return {
	name:'Zhang San'
}
  },
  methods: {
  	changeValue(){
  		this.name = 'Changed name-Li Si'
  	}
  }  
  
  // Descendant component
  inject:['keyName']
  create(){
	console.log(this.keyName) // Changed name - Li Si
}

How to get the initial state of a data in data?

data() {
    return {
      num: 10
  },
mounted() {
    this.num = 1000
  },
methods: {
    howMuch() {
        // Calculate how much num has increased, that is, 1000 - the initial value
        // You can use this$ options. data(). XXX to get the initial value
        console.log(1000 - this.$options.data().num)
    }
  }