Detaillierte Erläuterung der Dateninitialisierung (initState) in vue

Die folgende Spalte „Vue.js-Tutorial“ führt Sie durch die Dateninitialisierung (initState) in Vue. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

DateninitialisierungEine Vue-Instanz führt beim Erstellen eine Reihe von Initialisierungsvorgängen aus. Unter diesen Initialisierungsvorgängen ist initState derjenige, der am meisten mit der Datenbindung zusammenhängt.

Werfen wir zunächst einen Blick auf seinen Code:

function initState(vm) {
    vm._watchers = [];
    var opts = vm.$options;
    if(opts.props) {
        initProps(vm, opts.props); //初始化props
    }
    if(opts.methods) {
        initMethods(vm, opts.methods); //初始化methods
    }
    if(opts.data) {
        initData(vm); //初始化data
    } else {
        observe(vm._data = {}, true /* asRootData */ );
    }
    if(opts.computed) {
        initComputed(vm, opts.computed); //初始化computed
    }
    if(opts.watch && opts.watch !== nativeWatch) {
        initWatch(vm, opts.watch); //初始化watch
    }
}

Bei der Initialisierung so vieler Daten sind Requisiten, Methoden und Daten relativ einfach (daher werde ich sie nicht im Detail vorstellen☺), während Berechnung und Überwachung relativ einfach sind Einfach, die Logik ist kompliziert, daher werde ich im Folgenden hauptsächlich über Berechnungen und Beobachtungen sprechen (der folgende Codeteil ist vereinfacht).

initState initialisiert hauptsächlich die Requisiten, Methoden, Daten, berechneten Daten und Überwachungsdaten in der Vue-Instanz.

Beim Initialisieren von Requisiten (initProps) wird jedes Attribut in Requisiten durchlaufen und anschließend eine Typüberprüfung, Datenüberwachung usw. durchgeführt (eine Hook-Funktion wird bereitgestellt, die eine Warnung auslöst, wenn den Requisitenattributen ein Wert zugewiesen wird).

Beim Initialisieren von Methoden (initMethods) wird hauptsächlich überwacht, ob die Methodennamen in Methoden zulässig sind.

Beim Initialisieren von Daten (initData) wird die Beobachtungsfunktion ausgeführt, um jedes Attribut in den Daten tief zu durchqueren und so eine Datenentführung durchzuführen.

Beim Initialisieren der Berechnung (initComputed) wird überwacht, ob die Daten bereits in Daten oder Requisiten vorhanden sind. Andernfalls wird die Funktion defineComputed aufgerufen, die Daten überwacht und Getter und Setter gebunden auf die Eigenschaften in der Komponente. Wenn der Wert eines Attributs in der Berechnung eine Funktion ist, wird standardmäßig die Getter-Funktion des Attributs verwendet. Darüber hinaus kann der Wert des Attributs auch ein Objekt sein. Es verfügt nur über drei gültige Felder: Set, Get und Cache, die jeweils den Setter und Getter des Attributs angeben und angeben, ob das Caching erforderlich ist und der Cache standardmäßig auf „true“ gesetzt ist.

function initComputed(vm, computed) {
    var watchers = vm._computedWatchers = Object.create(null);

    for(var key in computed) {
        var userDef = computed[key];
        var getter = typeof userDef === 'function' ? userDef : userDef.get;

        //创建一个计算属性 watcher
        watchers[key] = new Watcher(
            vm,
            getter || noop,
            noop,
            computedWatcherOptions
        );

        if(!(key in vm)) {
            //如果定义的计算属性不在组件实例上，对属性进行数据劫持
            //defineComputed 很重要，下面我们再说
            defineComputed(vm, key, userDef);
        } else {
            //如果定义的计算属性在data和props有，抛出警告
        }
    }
}

Beim Initialisieren der Uhr (initWatch) wird die Funktion vm.$watch aufgerufen, um den Setter-Rückruf an die Eigenschaft in der Uhr zu binden (wenn in der Komponente keine solche Eigenschaft vorhanden ist, kann sie nicht erfolgreich überwacht werden. Die Eigenschaft muss in Requisiten, Daten oder berechnet vorhanden sein). Wenn der Wert des Attributs in der Überwachung eine Funktion ist, ist der Standardwert die Setter-Rückruffunktion des Attributs. Wenn der Wert des Attributs ein Array ist, werden die Inhalte im Array durchlaufen und Rückrufe werden jeweils an die Attribute gebunden. Darüber hinaus kann der Wert des Attributs auch ein Objekt sein. Zu diesem Zeitpunkt stellt das Handler-Feld im Objekt die Setter-Rückruffunktion dar, „immediate“ stellt dar, ob die Handler-Methode sofort ausgeführt werden soll, und „deep“ stellt dar, ob eine tiefe Überwachung erfolgen soll. Die Funktion

vm.$watch verwendet Watcher direkt, um das Beobachterobjekt zu erstellen. Der Wert des Attributs in watch existiert als watcher.cb und wird in der Funktion watcher.run ausgeführt, wenn der Beobachter aktualisiert wird. Wenn Sie diesen Prozess verstehen möchten, können Sie meine Einführung in Watcher im Vue-Responsive-System – Observe, Watcher und Dep – in meinem vorherigen Artikel lesen.

function initWatch(vm, watch) {
    //遍历watch，为每一个属性创建侦听器
    for(var key in watch) {
        var handler = watch[key];
        //如果属性值是一个数组，则遍历数组，为属性创建多个侦听器
        //createWatcher函数中封装了vm.$watch，会在vm.$watch中创建侦听器
        if(Array.isArray(handler)) {
            for(var i = 0; i < handler.length; i++) {
                createWatcher(vm, key, handler[i]);
            }
        } else {
            //为属性创建侦听器
            createWatcher(vm, key, handler);
        }
    }
}

function createWatcher(vm, expOrFn, handler, options) {
    //如果属性值是一个对象，则取对象的handler属性作为回调
    if(isPlainObject(handler)) {
        options = handler;
        handler = handler.handler;
    }
    //如果属性值是一个字符串，则从组件实例上寻找
    if(typeof handler === &#39;string&#39;) {
        handler = vm[handler];
    }
    //为属性创建侦听器
    return vm.$watch(expOrFn, handler, options)
}

computedcomputed ist im Wesentlichen ein Lazy-Evaluation-Beobachter mit Cachefähigkeit. Der neue Wert wird nur berechnet, wenn sich die Abhängigkeit ändert und zum ersten Mal auf das berechnete Attribut zugegriffen wird Ein Satz zur Erklärung.

Wie im obigen Code erwähnt, werden Sie gewarnt, wenn die Daten im berechneten Attribut in Daten und Requisiten vorhanden sind, was bedeutet, dass dieser Ansatz falsch ist. Daher deklarieren wir Daten im Allgemeinen direkt in berechneten Eigenschaften. Wenn sich im selben Codeausschnitt die definierte berechnete Eigenschaft nicht in der Komponenteninstanz befindet, wird die Funktion „defineComputed“ ausgeführt, um eine Datenübernahme der Daten durchzuführen. Werfen wir einen Blick darauf, was in der Funktion defineComputed geschieht.

function defineComputed(target, key, userDef) {
//是不是服务端渲染
var shouldCache = !isServerRendering();
//如果我们把计算属性的值写成一个函数，这时函数默认为计算属性的get
if(typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache ?
//如果不是服务端渲染，则默认使用缓存，设置get为createComputedGetter创建的缓存函数
createComputedGetter(key) :
//否则不使用缓存，直接设置get为userDef这个我们定义的函数
userDef;
//设置set为空函数
sharedPropertyDefinition.set = noop;
} else {
//如果我们把计算属性的值写成一个对象，对象中可能包含set、get和cache三个字段
sharedPropertyDefinition.get = userDef.get ?
shouldCache && userDef.cache !== false ?
//如果我们传入了get字段，且不是服务端渲染，且cache不为false，
//设置get为createComputedGetter创建的缓存函数
createComputedGetter(key) : 
//如果我们传入了get字段，但是是服务端渲染或者cache设为了false，设置get为userDef这个我们定义的函数
userDef.get :
//如果没有传入get字段，设置get为空函数
noop;
//设置set为我们传入的传入set字段或空函数
sharedPropertyDefinition.set = userDef.set ?
userDef.set :
noop;
}
//虽然这里可以get、set都可以设置为空函数
//但是在项目中，get为空函数对数据取值会报错，set为空函数对数据赋值会报错
//而computed主要作用就是计算取值的，所以get字段是必须的

//数据劫持
Object.defineProperty(target, key, sharedPropertyDefinition);
}

Im vorherigen Artikel „Vue Responsive System – Observe, Watcher, Dep“ habe ich in der Einleitung über Watcher erwähnt, dass „options.lazy“ auf „true“ gesetzt wird, wenn der berechnete Attribut-Watcher instanziiert wird Lazy-Auswertung der berechneten Eigenschaften und Cache-Möglichkeit, natürlich vorausgesetzt, dass der Cache nicht falsch ist.

cache ist nicht falsch, die Funktion „createComputedGetter“ wird aufgerufen, um die Getter-Funktion „computedGetter“ des berechneten Attributs zu erstellen.

Schauen wir uns zuerst einen Codeabschnitt an. Lazy des berechneten Attributs Watcher ist auf true gesetzt. Jedes Mal, wenn eine Abhängigkeit aktualisiert wird, wird die Ausführungsfunktion nicht aktiv ausgelöst, aber watcher.dirty wird auf true gesetzt. Auf diese Weise wird beim Auswerten der berechneten Eigenschaft die Funktion „computedGetter“ ausgeführt. Wenn watcher.dirty wahr ist, wird watcher.evaluate ausgeführt, um den Wert und den Watcher zu aktualisieren wird auf „false“ gesetzt, wodurch der Lazy-Evaluierungsprozess abgeschlossen ist. Solange die Abhängigkeit später nicht aktualisiert wird, wird das Update nicht ausgeführt und watcher.dirty wird nicht auf true gesetzt. Dann wird watcher.evaluate nicht ausgeführt, um den Wert zu aktualisieren, wodurch der Cache-Effekt erzielt wird .

Zusammenfassend verstehen wir, dass die berechneten Eigenschaften verzögert ausgewertet und zwischengespeichert werden können, wenn der Cache nicht falsch ist, und dass der Cache standardmäßig auf „true“ eingestellt ist. Wir verwenden daher meistens diesen Standardwert, also sagen wir computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值. 🔜 Besuchen Sie:

Programmierunterricht

! !

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Dateninitialisierung (initState) in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!