Hutchison front-end interview experience (Vue two-way binding principle) a confession

 June 2019 No. 6, for love, I left work more than a year in Guangzhou, Hangzhou, the Internet came to the city. The beginning of my trip to the front end of the interview ...

Put down the wrench tighten the screws, start building from the plane ...

Interview first, he began by asking how to achieve Vue two-way binding .

Look fooled, read the source code before, but no in-depth study, only answer the use Object.defineProperty

Object.defineProperty(obj, prop, {
    // ...
    get: function() {}
    set: function() { // ... }
})复制代码

If give me a chance I will answer

Vue two-way binding, use data hijacking and publish-subscribe pattern implementations

Then I draw a diagram to describe the whole implementation process is like

vue2.0 uses Object.defineProperty data hijacking

The main principle is that the described method using the set of objects to intercept the signal and transmit the subscriber

// ... 
let dep = new Dep()
return Object.defineProperty(obj, prop, {
    // ...
    get: function(key) {
        dep.target = this
        dep.addSub()
        // ...
    }
    set: function(newVal) {
        val = newVue;
        // 发送一个dep信号
        dep.notify()
        // ...
    }
})复制代码

The vue3.0 may be adopted to implement the data Proxy hijacking

let target = {}

let p = new Proxy(target, {
    set: function() {
        //...
    },
    get: function() {
        //...
    }
})
复制代码

why?

We know Object.defineProperty has limitations, he intercepted target key is the value of a simple object

So, cut, array, change the array length of the object properties, it can not be hijacked

The new features for ES6, Proxy , it can intercept the object, an array of objects almost all types of packaging

Proxy but not compatible IE, the bottom or the use of so Vue3.0 Object.defineProperty

Proxy used as a api, that is to say:

We do not compatible with IE, boldly using Proxy-way binding and will not have an array of attributes and cut less than hijacking issue

We should be compatible IE, to use the original two-way binding, but it should be aware of some of these changes can not hijack flaw

We can see from the chart, change the value of the object Observer observed, which is an observer mode

The observed signal Observer publisher to publish subscriber This is a subscription model

So what's the difference with the Observer pattern publish-subscribe pattern here?

Let's talk about the observer pattern

What is the observer pattern, a first viewer, a viewer is, this is the observed data, and the Observer is the observer, when the observer changes, the observed signal to occur actively

According to this idea, we can imagine, especially large, two-way binding when the design time, think about how to monitor the changes in the data, that is, how to use the observer mode to achieve, and just handling of an object has objects The method we can use is Object.defineProperty

If you do not have this method how we achieve it?

This is another one implementation angular dirty detected , i.e. changes constantly polling data, the detection performance is clearly dirty consume relatively large

Then talk about the publish and subscribe model

In the software architecture , the publish and subscribe is a messaging paradigm , sender of the message (called the publisher) does not send messages directly to a specific recipient (called subscribers). But the announcement is divided into different categories, subscribers do not need to know which (if any) may be present. Also, subscribers can express interest in one or more categories, and receive only messages of interest, which the publisher (if any) there is no need to know.

Here it is clear that the difference is that, unlike the observer and the observed, publishers and subscribers are not aware of each other's existence, the publisher just need to send a message to the subscriber inside, subscribers simply need to accept yourself subscriptions

Thus publish and subscribe model is a loosely coupled relationship between the watcher and the Observer are not affected each other

postscript

Thanks for watching, for the first time wrote an open blog writing is not good, Cankuicankui!

Reproduced in: https: //juejin.im/post/5d08abeaf265da1b8e70a1d7