Реактивный принцип Vue — понимание Observer, Dep, Watcher

Vue.js
Реактивный принцип Vue — понимание Observer, Dep, Watcher

открытие

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

Если есть ошибка, прошу больших ребят указать 😋

Object.defineProperty

Я полагаю, что многие студенты более или менее понимают, что принцип отзывчивости Vue достигается за счетObject.definePropertyосуществленный. одеялоObject.definePropertyСвязанный объект станет "Отзывчивый"изменять. То есть при изменении объекта запускаются события get и set. Что, в свою очередь, запускает некоторые обновления представления. Возьми каштан 🌰

function defineReactive (obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: () => {
            console.log('我被读了，我要不要做点什么好?');
            return val;
        },
        set: newVal => {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log("数据被改变了，我要把新的值渲染到页面上去!");
        }
    })
}

let data = {
    text: 'hello world',
};

// 对data上的text属性进行绑定
defineReactive(data, 'text', data.text);

console.log(data.text); // 控制台输出 <我被读了，我要不要做点什么好?>
data.text = 'hello Vue'; // 控制台输出 <hello Vue && 数据被改变了，我要把新的值渲染到页面上去!>

Наблюдатель "Реактивный"

Vueкитайское использованиеObserverкласс для управления вышеуказанным реактивнымObject.definePropertyпроцесс. Мы можем описать это с помощью следующего кода,this.dataТо есть мыVueопределено в кодеdataВсе свойства связаны "реактивно".

class Observer {
    constructor() {
        // 响应式绑定数据通过方法
    	observe(this.data);
    }
}

export function observe (data) {
    const keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
       // 将data中我们定义的每个属性进行响应式绑定
       defineReactive(obj, keys[i]);
    }
}

Деп "управление зависимостями"

Что такое зависимость?

Я считаю, что я не видел исходный код или только что соприкоснулся с нимDepСтуденты, которые используют это слово, будут сбиты с толку. ЭтоDepДля чего его используют? мы проходимdefineReactiveметод будетdataПосле того, как данные реагируют, хотя изменения данных можно отслеживать, как мы обрабатываем представление уведомлений для обновления?

DepЭто поможет нам собрать [где быть уведомленным]. Например, в следующем примере кода мы обнаруживаем, что хотяdataимеютtextа такжеmessageсвойства, а толькоmessageотображается на странице, как дляtextКаким бы ни было изменение, оно не повлияет на отображение представления, поэтому мы толькоmessageПросто сделайте сбор, и вы сможете избежать бесполезной работы.

В настоящее времяmessageизDepЗависимость собирается, и эта зависимость используется для управленияdataсерединаmessageменяется.

<div>
    <p>{{message}}</p>
</div>

data: {
    text: 'hello world',
    message: 'hello vue',
}

когда используешьwatchАтрибуты, то есть определенный разработчиком мониторинг изменения атрибутов в определенных данных. такие как мониторингmessageИзменение,messageМы будем уведомлены, когда будут внесены измененияwatchЭтот хук заставляет его выполнять функцию обратного вызова.

В настоящее времяmessageизDepТолько что собрал две зависимости, вторая зависимость используется для управленияwatchсерединаmessageменяется.

watch: {
    message: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
    },
}

Когда разработчик настраиваетcomputedПри расчете свойств следующим образомmessageTсобственность, зависитmessageизменений. следовательноmessageМы также будем уведомлены об измененияхcomputed, позвольте ему выполнить функцию обратного вызова. В настоящее времяmessageизDepСобираются три зависимости, и эта зависимость используется для управленияcomputedсерединаmessageменяется.

computed: {
    messageT() {
        return this.message + '!';
    }
}

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

依赖收集

Как собрать зависимости

Откуда нам знатьdataОдно из свойств в используется, ответObject.definePropertyПотому что чтение недвижимости будет вызватьgetметод. Код можно изменить следующим образом:

function defineReactive (obj, key, val) {
    let Dep; // 依赖

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: () => {
            console.log('我被读了，我要不要做点什么好?');
            // 被读取了，将这个依赖收集起来
            Dep.depend(); // 本次新增
            return val;
        },
        set: newVal => {
            if (val === newVal) {
                return;
            }
            val = newVal;
            // 被改变了，通知依赖去更新
            Dep.notify(); // 本次新增
            console.log("数据被改变了，我要把新的值渲染到页面上去!");
        }
    })
}

что такое зависимость

Что такое так называемая зависимость? Ответ был представлен на картинке выше, то естьWatcher.

Наблюдатель "Посредник"

WatcherЭто роль, похожая на посредника, например,messageЕсть три посредника, когдаmessageОб изменениях сообщается этим трем посредникам, и они реализуют необходимые изменения.

WatcherВозможность контролировать, кому принадлежит, даdataсвойства вwatch,илиcomputed,WatcherОн имеет унифицированную запись обновления, если вы уведомите его, будет выполнен соответствующий метод обновления.

Следовательно, мы можем сделать вывод, чтоWatcherНеобходимо 2 метода. Один для уведомления об изменениях, а другой для сбора в Dep.

class Watcher {
    addDep() {
        // 我这个Watcher要被塞到Dep里去了~~
    },
    update() {
        // Dep通知我更新呢~~
    }, 
}

Суммировать

Подводя итог,VueСуть принципа отзывчивости состоит в том, чтоObserver,Dep,Watcher.

ObserverОтзывчивая привязка выполняется в , когда данные читаются, триггерgetметод, выполнитьDepсобирать зависимости, то есть собиратьWatcher.

Срабатывает при изменении данныхsetметод, через все зависимости, соответствующие (Watcher) для выполнения обновления. Напримерwatchа такжеcomputedВыполняется определенный разработчиком метод обратного вызова.

Эта статья относится к вводной статье, которую можно легко понять в первую очередьObserver,Dep,WatcherРоль и отношения троих. Позже он будет постепенно детализироваться и углубляться, и постепенно будет пониматься и учиться.

Если вы считаете, что это полезно для вас, ставьте лайк~

Сериал, который я пишу~

Блог на гитхабеДобро пожаловать на общение~

Категории