Вспомните исповедальный опыт предварительного собеседования (принцип двусторонней привязки Vue)

Vue.js

6 июня 2019 года я по любви уехала из Гуанчжоу, где проработала больше года, и приехала в интернет-город Ханчжоу. Начинаю свое путешествие по фронтенд-интервью...

Наденьте гаечный ключ на винт и начните строить самолет...


Первым в интервью я спросил Vue, как реализовать двустороннюю привязку в самом начале..

С завязанными глазами, я видел исходный код раньше, но я не изучал его глубоко, и только ответил на использованиеObject.defineProperty

Object.defineProperty(obj, prop, {
    // ...
    get: function() {}
    set: function() { // ... }
})

Если бы у меня был еще один шанс, я бы ответил так

Двусторонняя привязка Vue с использованиемПерехват данных и публикация-подпискашаблон реализован

Затем я рисую еще одну картинку, чтобы описать, как проходит весь процесс реализации.


Vue2.0 использует Object.defineProperty для захвата данных

Основной принцип реализации заключается в использовании метода set в объекте описания для перехвата и отправки сигнала абонента.

// ... 
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()
        // ...
    }
})

В vue3.0 прокси может использоваться для захвата данных.

let target = {}

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

Зачем?

Мы знаем, что Object.defineProperty имеет ограничения, и целью его перехвата является просто значение ключа объекта

Следовательно, удаление свойств объекта, изменение массива и длины массива, его нельзя угнать

И новые возможности ES6,Proxy, он может перехватывать объекты, массивы и почти все типы упаковки объектов.

Но Proxy не совместим с IE, поэтому нижний слой Vue3.0 по-прежнему использует Object.defineProperty.

И использовать Proxy в качестве API, то есть:

Мы не совместимы с IE, поэтому смело используем Proxy для двусторонней привязки и проблем с удалением атрибутов и захватом массива не будет.

Если мы хотим быть совместимыми с IE, мы используем оригинальную двустороннюю привязку, но обратите внимание на ее недостаток, заключающийся в том, что она не может перехватить некоторые изменения.


Как видно из рисунка выше, Observer наблюдает за изменением значения объекта, что является паттерном наблюдателя.

Наблюдатель публикует наблюдаемый сигнал подписчику, что является моделью публикации-подписки.

Так в чем же разница между шаблоном наблюдателя и шаблоном публикации-подписки?

Давайте сначала поговорим о шаблоне наблюдателя

Что такое режим наблюдателя? Во-первых, есть наблюдатель и наблюдаемое. Наблюдаемое здесь — это данные, а наблюдатель — это Наблюдатель. Когда наблюдаемое изменяется, оно будет активно посылать сигнал наблюдаемому.


В соответствии с этой идеей мы также можем представить, что при проектировании двухсторонней привязки мы думали о том, как отслеживать изменение этих данных, то есть как использовать режим наблюдателя для достижения этого, а в обработке находится объект объекта.Метод, который мы можем использовать, это Object.defineProperty

Как мы можем достичь этого без этого метода?

Это еще одна реализация angularгрязное обнаружение, то есть постоянно опрашивать изменения в данных.Очевидно, что грязное обнаружение потребляет много производительности.

Поговорим о модели публикации-подписки.

существуетАрхитектура программного обеспечениясередина,опубликовать подписатьсяэтоИнформацияПарадигма, отправитель сообщения (называемый издателем) не отправляет сообщение непосредственно конкретному получателю (называемому подписчиком). Вместо этого опубликованные сообщения группируются в разные категории, не зная, какие подписчики (если они есть) могут существовать. Аналогичным образом подписчики могут проявлять интерес к одной или нескольким категориям и получать только интересующие их сообщения, не зная, какие издатели (если они есть) существуют.

Здесь очевидно, что отличие состоит в том, что, в отличие от наблюдателя и наблюдаемого,Издатели и подписчики не знают о существовании друг друга, издателю нужно только отправить сообщение подписчику, а подписчику нужно только принять контент, на который ему нужно подписаться.

Таким образом, модель «публикация-подписка»Слабая связьОтношения между наблюдателем и наблюдателем не зависят друг от друга.


постскриптум

Спасибо за просмотр, я впервые пишу публичный блог, мне стыдно и стыдно!










Категории