Ein Artikel, der das Prinzip der Reaktivität in Vue ausführlich erklärt

Dieser Artikel wird Ihnen helfen, Vue kennenzulernen und ein tiefgreifendes Verständnis der reaktiven Prinzipien in Vue zu erlangen. Ich hoffe, er wird Ihnen hilfreich sein!

Dieser Artikel erinnert an die Verabschiedung des responsiven syntaktischen Zuckers

Kommen wir ohne weitere Umschweife zur Sache. Hier ist ein einfaches Beispiel:

let a=3
let b=a*10
console.log(b)//30
a=4
console.log(b)//40

At Dieses Mal wollen wir b=4*10, was natürlich nicht möglich ist, selbst wenn wir eine var voranstellen, wird nur eine variable Promotion auftreten Der angegebene Wert erhöht sich nicht. var也只会发生变量提升，我们所给的值并不会提升。

而这个时候，响应式的作用就体现出来了：

import { reactive } from 'vue'

let state = reactive({ a: 3 })
let b = computed(() => state.a * 10)
console.log(b.value) // 30
state.a = 4
console.log(b.value) // 40

只需要一个简单的响应式API便可实现跟踪变化的效果。【相关推荐：vuejs视频教程、web前端开发】

分析一下reactive

事实上，Vue3的reactive的本质上就是一个发布订阅模式

通过创建依赖图来跟踪数据的依赖关系。依赖图是一个图形，它描述了哪些数据是依赖于哪些数据的。当数据发生变化时，Vue 3 的 reactive 系统会自动触发视图的更新。这是因为它在依赖图中跟踪了数据变化，并通过将其与视图的更新关联起来来实现的

这里我列出尤大在Vue Master里演示的代码做个简单的示例：

class Dep{
    constructor(value){
        this.subscribers=new Set()
        this._value=value
    }
    get value(){
        this.depend()
        return this._value
    }
    set value(newValue){
        this._value=newValue
        this.notify()
    }
    depend(){
        if(activeEffect){
            this.subscribers.add(activeEffect)
        }
    }
    notify(){
        this.subscribers.forEach(effect=>{
            effect()
        })
    }
}

我们来分析一下这段代码：

• 定义一个subscribe属性，作为一个订阅者列表，用来存储所有的订阅者信息
• depend函数用来管理依赖关系，即该订阅者所依赖的该变量
• notify函数便是作为通知所有订阅者该变量的值已经发生变化

当变量的值发生变化的时候，它便可以自动的通知所有的订阅者进行更新了

Vue2的Object.defineProperty

事实上，在Vue2时期，响应式的都是交给Object.defineProperty来实现的，但在Vue3当中切换成了Proxy，我们等下来结合实际代码来看原因；我们先来看看Vue2是如何实现的：

function reactive(raw){
    Object.keys(raw).forEach(ket=>{
        const dep=new Dep()
        let value=raw[key]
        
        Object.definProperty(raw,key,{
            get(){
                dep.depend()
                return value
            },
            //当属性发生
            set(newValue){
                value=newValue
                dep.notify()
            }
        })
    })
    //这时候返回的原始对象已经具有响应性
    return raw
}

这样一个简单的响应式API就实现了

但这里缺点也就很明显了：在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更 而在Vue3当中，则是会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的

这就导致了：

• 当我们添加或者删除对象的属性时，Vue2的响应式是无法检测的，由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
• 无法检测数组的下标和长度的变化

当然，这个属于历史局限了，当时ES5也就只能选择Object.definProperty，但在了ES6版本，便多了Proxy，这时候Vue的响应式便得到了升级

Vue3的Proxy

Vue3采用Proxy来监控数据的变化，相较于Vue2来说，不仅解决了上述的问题，还有这些优势：

• 无需再使用vue.$set来触发响应式，这让代码看上去能过更加简介
• 全方位的数组变化检测，消除Vue2中无效边界情况
• 减少了Vue3中书写响应式的代码量，这让我们的开发更加方便

让我们来看看实际代码是什么样子的：

const reactiveHandles={
    get(target,key,receiver){
        const dep=getDep(target,key)
        dep.depend()
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver){
        const dep=getDep(target,key)
        const result=Reflect.set(target,key,value,receiver)
        dep.notify()
        return result
    }
}

通过对对象进行收集依赖来实现响应式的方式也便是Vue3响应式的精髓

ref

在官方文档有句话：reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制，而reactive的限制便是：

• 只能处理可被观测的数据结构，如数组和对象；而不可观测的数据结构，如原始数据类型就无法被其监测
• 只能处理定义在它所在组件的数据，不能处理全局变量

而这个时候就需要refZu diesem Zeitpunkt kommt die Rolle der Reaktionsfähigkeit ins Spiel: rrreee

Nur eine einfache Responsive API kann den Effekt der Nachverfolgung von Änderungen erzielen. [Verwandte Empfehlungen: vuejs Video-Tutorial, Web-Frontend-Entwicklung]

Analyse Werfen wir einen Blick auf reaktiv🎜

🎜Tatsächlich ist reaktiv von Vue3 im Wesentlichen ein 🎜Veröffentlichungs- und Abonnementmodell🎜🎜🎜durch die Erstellung eines Abhängigkeitsdiagramms zur Verfolgung von Datenabhängigkeiten. Ein Abhängigkeitsdiagramm ist ein Diagramm, das beschreibt, welche Daten von welchen Daten abhängig sind. Wenn sich Daten ändern, löst das reaktive-System von Vue 3 automatisch Ansichtsaktualisierungen aus. Dies liegt daran, dass es Datenänderungen im Abhängigkeitsdiagramm verfolgt und diese mit Aktualisierungen der Ansicht verknüpft. 🎜🎜 Hier liste ich den von Youda in Vue Master demonstrierten Code als einfaches Beispiel auf: 🎜rrreee🎜 Lassen Sie uns diesen Code analysieren: 🎜🎜

• Definieren Sie ein subscribe-Attribut als Abonnentenliste, um alle Abonnenteninformationen zu speichern
• depend wird zum Verwalten von Abhängigkeiten verwendet ist die Variable, von der der Abonnent abhängt.
• notify Die Funktion wird verwendet, um alle Abonnenten darüber zu informieren, dass sich der Wert der Variablen geändert hat

🎜🎜Wenn sich der Wert der Variablen ändert, kann sie automatisch alle Abonnenten zur Aktualisierung benachrichtigen🎜

🎜Vue2 Object.defineProperty🎜

🎜Tatsächlich war in der Vue2-Ära Die Reaktionsfähigkeit wurde von Object.defineProperty implementiert, aber in Vue3 wurde sie auf Proxy umgestellt. Warten wir ab und sehen uns den Grund in Kombination mit dem tatsächlichen Code an. Schauen wir uns zunächst an, wie Vue2 ist implementiert: 🎜rrreee🎜 So eine einfache reaktive API ist implementiert 🎜🎜 Aber auch hier liegen die Mängel auf der Hand: 🎜 In Vue 2.x wird das übergebene Objekt direkt von Vue.observable geändert 🎜. In Vue3 wird ein reaktionsfähiger Proxy zurückgegeben und das Quellobjekt wird immer noch nicht reagiert🎜🎜🎜Dies führt zu:🎜🎜

• Wenn wir hinzufügen oder löschencode> die Eigenschaften des Objekts, kann die Reaktionsfähigkeit von Vue2 nicht erkannt werden, da Vue beim Initialisieren der Instanz eine Getter/Setter-Konvertierung für die Eigenschaft durchführt, sodass die Eigenschaft in der Reihenfolge auf dem <code>data-Objekt vorhanden sein muss damit Vue es in ein responsives umwandeln kann
• Änderungen im Index und in der Länge

🎜🎜Natürlich ist dies ein Historische Einschränkung. Zu diesem Zeitpunkt konnte ES5 nur Object.definProperty auswählen, aber in der ES6-Version gibt es mehr Proxy und die Reaktionsfähigkeit von Vue wurde verbessert🎜🎜Vue3s Proxy🎜🎜 Vue3 verwendet Proxy zur Überwachung von Datenänderungen. Im Vergleich zu Vue2 löst es nicht nur die oben genannten Probleme, sondern bietet auch diese Vorteile : 🎜🎜

• Es ist nicht mehr erforderlich, vue .$set zu verwenden, um die Reaktionsfähigkeit auszulösen, wodurch der Code besser aussieht. 🎜Einführung🎜
• Umfassende Erkennung von Array-Änderungen, Eliminieren ungültiger Randbedingungen in Vue2
• Reduzieren der Menge an reaktionsfähigem Code, der in Vue3 geschrieben wurde, was unsere Entwicklung komfortabler macht

🎜🎜Werfen wir einen Blick darauf, wie der tatsächliche Code aussieht : 🎜rrreee🎜Sammeln Sie Abhängigkeiten, indem Sie 🎜 auf Objekte ausführen. 🎜Die Art und Weise, Reaktionsfähigkeit zu implementieren, ist die Essenz der Vue3-Reaktionsfähigkeit offizielle Dokumentation: reactive() sind letztendlich auf die Tatsache zurückzuführen, dass JavaScript keinen „Referenz“-Mechanismus hat, der auf alle Werttypen einwirken kann, und die Einschränkungen von reactive sind: 🎜🎜 <ul> <li>Kann nur beobachtbare Datenstrukturen wie Arrays und Objekte verarbeiten; nicht beobachtbare Datenstrukturen wie primitive Datentypen können nicht überwacht werden</li> <li>Es können nur Daten verarbeitet werden, die in der Komponente definiert sind, in der sie vorhanden sind befindet sich und kann keine globalen Variablen verarbeiten</li> </ul>🎜 🎜Zu diesem Zeitpunkt wird <code>ref für den 🎜Basisdatentyp🎜 benötigt, der die Mängel ausgleicht von reaktiv. Um es einfach auszudrücken: ref eignet sich eher für einfache einzelne Variablen Value (aber in der tatsächlichen Entwicklung geht es meistens um ref hahahaha🎜🎜Übrigens ist es schade, dass der Vorschlag für responsive Syntax Zucker war abgesagt🎜

(Teilen von Lernvideos: vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEin Artikel, der das Prinzip der Reaktivität in Vue ausführlich erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!