Pay attention to “songbao write code”, selected good articles, a question of the day

Time is always your own

Every minute is also for their future matting and value-added

Saucxs | songEagle

Source: Original

One, foreword

The flag just established on December 23, 2020.One question of the day, the topic type is not limited, can be: algorithm questions, interview questions, elaboration questions and so on.

How does VUE data binding work?

A question of the Day

  • Question 4: How to find repetitive elements in a scientific and efficient way?

  • 3. “Question of the Day” The interviewer asks you what you think of Promise?

  • In ES6, why do we use Symbol?

  • 1. “How does an interview question trigger deep soul searching?”

How does VUE data binding work?

This topic itself is not particularly difficult, can only be said to be as the foundation of recruitment interview questions, but if you want to answer this question is not very easy.

Do not believe continue to read

1. Summary answer

Vue. Js is a very good front-end development framework, vUE version is v2.x

Vue has several core areas: vUE instantiation, virtual DOM, template compilation process, data binding.

We’re back to business. Vue. Js author Yu Yuhe initially tried to implement something similar to Angular1, but found it very unelegant in terms of data handling, so he took a creative approach to data binding using Object.defineProperty in ES5, which led to the original Vue.

The realization principle of VUE data binding is inseparable from the responsive data processing mode in VUE.

Take a look at the picture from the official website:

Basic principles of vUE’s responsiveness:

  • 1. Vue iterates through all the properties of the object in this data.

  • DefineProperty = object.defineProperty = object.defineProperty = object.defineProperty

  • And every component instance has a Watcher object,

  • 4. It records properties as dependencies during component rendering

  • 5. When setters for dependencies are called later, Watcher is told to recalculate, causing its associated components to be updated.

2, highlights of the answer

We only used ES5 method object.defineProperty to implement data listening, so it is not clear how to implement.

At this point we need to ask ourselves, how to find the bright spot?

Vue’s responsive principle designs three important objects: Observer, Watcher and Dep.

  • Observer objects: Data objects in vUE are converted to observers during initialization.

  • Watcher object: Combine a template and an Observer object to generate an instance of Watcher, which is the subscriber of subscribers.

  • Dep objects: A link between Watcher objects and observers. Each Observer has an instance of Dep that stores the subscriber Watcher.

When a property changes, the dep.notify method of the subject object Observer executes. This method sends a message through the subscriber Watcher list, and the Watcher executes the run method to update the view.

The dependency diagram is shown below to better understand our understanding

Next, we need to add that instructions and data bindings during template compilation generate Watcher instances, as does the Watch property in the instance.

Say these have feel a little confused, then we summarize how to highlight the answer

  • 1. Hijack data in data, prop, Method, computed, and Watch in the initState method of the lifecycle, and convert related objects into Observer objects through observe and Object.defineProperty methods.
  • 2. Then parse the template in initRender method, establish a dependency relationship between the instructions in the template and the data of the object through Watcher object, Dep object and observer mode, and use the global object Dep. Target to achieve dependency collection.
  • 3. When data changes, setter is called, triggering dep.notify in object.defineProperty, iterating through the list of data dependencies, and executor update notifying Watcher to update the view.
  • Vue cannot detect the addition and removal of object attributes, but can use the global vue. set method (or vm.$set instance method).
  • Vue cannot detect arrays set with indexes, but you can use the global vue. set method (or the vm.$set instance method).
  • There is no way to detect direct changes to the array length, but splice can be used

Then write a listener variable that uses Object.defineProperty

var obj = {}; var a; Object.defineproperty (obj, 'a', {get: function() {console.log('get val'); return a; }, set: function(newVal) { console.log('set val:' + newVal); a = newVal; }}); obj.a; // get val obj.a = 'saucxs' //set valCopy the code

If the above code format is not correct, you can view the code image below

3. Advanced answers

Because now vUE is at 3 instead of 2, at this point, we can talk a little bit about how 3 works.

Proxy is a new feature in ES6 that can be used to define operations on objects.

let p = new Proxy(target, handler); // 'target' represents the object to which the agent is to be added. // 'handler' uses operations in the custom objectCopy the code

If the above code format is not correct, you can view the code image below

You can easily use a Proxy to implement a data binding and listening.

let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { getLogger(target, property) return Reflect.get(target, property, receiver); }, set(target, property, value, receiver) { setBind(value); return Reflect.set(target, property, value); }}; return new Proxy(obj, handler); }; let obj = { saucxs: 1 } let value let p = onWatch(obj, (v) => { value = v }, (target, property) => { console.log(`Get '${property}' = ${target[property]}`); }) p.saucxs = songEagle // bind `value` to `songEagle` p.saucxs // -> Get 'saucxs' = songEagleCopy the code

If the above code format is not correct, you can view the code image below

Then what is the difference between VUE2 and VUe3?

And why did you upgrade your data listening?

The reason why vue can’t implement deep listening on array objects is that the component will bind the data in the data via defineProperty responsively or bidirectionally every time it renders. Attributes that were not appended before will not be bound and will not trigger update rendering.

The difference between:

1. Grammar

  • DefineProperty can only respond to attributes when first rendered,
  • What the Proxy needs is the overall listening, you don’t need to care about what attributes there are, and there are 13 configuration items for Proxy, which can do more detailed things, which can’t be achieved by defineProperty before.

2. Compatibility level

  • The reason why vue2. X is only compatible with IE8 is because defineProperty is not compatible with IE8 and there are minor compatibility issues with other browsers.
  • Proxy is compatible with other browsers except IE. This time vue3 uses it, indicating that VUe3 has directly abandoned the compatibility consideration of IE.

All kinds of benefits

“Songbao Code” : development knowledge system construction, technology sharing, project combat, laboratory, one question a day, take you to learn new technology together, summarize the learning process, let you advance to senior engineer, learn project management, think about career development, life perception, enrich grow up. Questions or suggestions, please leave a message on our official account.

1, byte push benefits

Reply “school admission” to get internal push code

Reply “Social recruitment” to get internal promotion

Reply “intern” to get internal push

There will be more benefits later

2. Learning materials welfare

Reply “Algorithm” to obtain algorithm learning materials

3. One question of the day

How does VUE data binding work?

  • Question 4: How to find repetitive elements in a scientific and efficient way?

  • 3. “Question of the Day” The interviewer asks you what you think of Promise?

  • In ES6, why do we use Symbol?

  • 1. “How does an interview question trigger deep soul searching?”