This is the 29th day of my participation in Gwen Challenge

1. What is the difference between computed and Watch in Vue?

Computed attribute computed

1. Cache is supported. Only when the dependent data changes, the calculation will be recalcated. 2. So the default is get; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes. 4. Computed attribute values are cached by default. Computed attributes are cached based on their responsive dependencies, that is, the value 5 computed from the data declared in data or the props passed by the parent component. It is a many-to-one or one-to-one, and generally with computed 6, computed attributes automatically listen for changes in dependency values and return content dynamicallyCopy the code

Listening property Watch

Whenever data changes, listening function 2 is executed. Asynchronous operation 3 is supported. The value of listening attribute can be an object, and the handle callback, deep and immediate attributes can be received. The listening function receives two arguments, the first of which is the latest value. The second parameter is the value 6 before the input. When an attribute changes, the corresponding operation needs to be performed. A couple more;Copy the code
 watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log(newVal)
      },
      deep: true.// Deep listening, used when complex types of data are detected to detect changes in the internal values of objects
      immediate: true // Loading the component immediately triggers the callback function to execute}}Copy the code

2. Why use vue.set?

Vue.set adds reactive properties to reactive objects and sets array elements to trigger view updates

Vue.$set(target, key, value) can be used to dynamically add or modify data to an array, object, or view. In the constructor new vue (), the data is bound to the getter and setter of object.defineProperty. Therefore, XXX = 'XXX' assignment method cannot change the value to trigger the update of the view in vue. DefineProperty must be changed via object.defineProperty, and Vue.$set() encapsulates JS's underlying Object.defineProperty method. Since Vue performs getter/settter operations on properties when initializing instances, properties must exist on data objects for them to be responsiveCopy the code
data () {
    return {
        form: {
            count: 1}}}// this.form.count is reactive
 
// If you add attributes directly, it is non-responsive
this.form.flage = true  // non-responsive

// If you want to implement reactive
Vue.set(this.form, 'flage'.true) // Add attributes responsively
Copy the code

Add response properties to nested objects using the vue.set (Object, key, value) method

Vue.set(this.form, 'flage'.true)
Copy the code

You can also use the vm.$set instance method, which is also an alias for the global vue.set method

this.$set(this.form, 'flage'.true)
Copy the code

**Vue.set(target, key/index, value) adds a property to a reactive object and makes sure the new property is also reactive and triggers view updates

3. What is $nextTick and the application scenario?

The Vue implementation does not update the DOM immediately after the data occurs. With vm.$nextTick, a delayed callback is performed immediately after the next DOM update loop ends. If used after the data is modified, the DOM can be retrieved in the callback.

Data and DOM rendering are asynchronous in Vue, so anything that changes the DOM structure with the data should go into the callback function of this.$nextTick().

The $nextTick() method is used to retrieve the updated DOM.

NextTick () is a callback function that is deferred until the next DOM update. This function is automatically executed when the data is updated and rendered in the DOM.Copy the code

Again: Vue implementation is responsive, not the DOM changes immediately after the data changes, but according to a certain strategy for DOM update. $nextTick is a deferred callback after the next DOM update loop. If you use $nextTick after modifying the data, you can retrieve the updated DOM in the callback.

When do I need vue.nexttick ()?

1. The DOM manipulation performed by the Created () hook function in the Vue lifecycle must be placed in the vue.nexttick () callback because the DOM is not actually rendering at the time the Created () hook function is executed and DOM manipulation is useless. So be sure to put the DOM manipulation js code in the vue.nexttick () callback. The equivalent is the Mounted hook function, which executes when all DOM mounting is complete.

created(){ let self = this; $refs.aa.innerhtml =" XXXXXXXX "; $refs.aa.innerhtml =" XXXXXXXX "; // write to DOM element}); },Copy the code

2. When you want to change the DOM element’s data in a project and do something based on the new DOM, ** a series of JS operations on the new DOM need to be put into the view.nexttick () callback. In plain English, you need it when you want to use JS immediately to manipulate a new view after changing data

** Summary: ** The purpose of using vue.nexttick () is to get the updated DOM. Trigger timing: The Vue. NextTick () callback is executed immediately after the DOM is updated after the data in the same event loop changes

Code in the same event loop completes execution (nextTicke) -> DOM update -> nextTick callback (callback) triggers executionCopy the code

4. What is the principle of two-way data binding of Vue?

Vue adopts the data hijacking + subscribe publishing model to achieve bidirectional binding. Add get and set methods to each attribute of data in the component via object.defineProperty (). When the data changes, the corresponding listener callback function in the set is triggered to publish the change information to the subscriber.

Component initialization: (1) Create a DEP Object as an observer (a collection dependent, subscribing, publishing carrier). (2) add getter and setter methods to properties in data and subproperties of data via object.defineProperty (). When calling the getter, register the function in deP. When the setter is called, the function you just registered is notified to execute. When the component is mounted: 3, compile parses the template directive and replaces the variables with data. Then initialize the render page view and bind the new function to the node corresponding to each instruction, listening for the function. The page is then updated whenever the data changes. The component also defines a Watcher class as a subscriber. Watcher can serve as a bridge between the DEP and the component. When it is instantiated, it will add itself to deP. At the same time, it has an update method. When it receives notification of deP change, it will call its update method and trigger the corresponding function in COMPILE to complete the updateCopy the code

5. How to solve the flash problem of Vue initialization page?

This happens because you have no control over how the DOM is displayed on the page before the Vue code is parsed, so you see template strings and so on.

Solution: Add the V-cloak rule to the CSS code and the V-cloak attribute to the tag to be compiledCopy the code
[v-cloak] {display: none; } <div v-cloak>
  {{ message }}
</div>
Copy the code

6. How does Vue know browser cache?

1. When the project is packaged, add hash value to each packaged file, usually adding timestamp 2 at the end of the file, add meta tag to the HTML file, set the content property to "no-cache 3", and forbid cache setting in the backend serverCopy the code

7. Why must data be a function in Vue components?

If data is an object, when reusing components, because data points to a common reference type address, any changes to the data of one component will also change the data of other components that are reused.

If data were a function that returned an object and returned a new object each time the component was reused, the above problem would not occur

8. What is mixin?

Mixin enables us to write pluggable and reusable functionality for Vue components. If you want to reuse a set of component options, such as lifecycle hooks, methods, etc., across multiple components, you can write them as mixins and simply reference them in your component. The contents of the mixin are then merged into the component. If you define a lifecycle hook in a mixin, it will be optimized for the component's own hook at execution timeCopy the code