Un article expliquant en détail le principe de réactivité dans Vue

Cet article vous aidera à apprendre Vue et à acquérir une compréhension approfondie des principes réactifs de Vue. J'espère qu'il vous sera utile !

Cet article commémore le décès du sucre syntaxique réactif

Sans plus tarder, allons droit au but L'application de la réactivité dans le développement quotidien est très courante :

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

At. cette fois, nous voulons b=4*10, ce qui n'est évidemment pas possible. Même si nous ajoutons un var devant, seule la promotion variable se produira. la valeur donnée n’augmentera pas. 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的限制便是：

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

而这个时候就需要refÀ ce stade, le rôle de la réactivité entre en jeu : rrreee

Seule une simple API réactive peut obtenir l'effet de suivi des modifications. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

Analyse Jetons un coup d'œil au réactif🎜

🎜En fait, le réactif de Vue3 est essentiellement un 🎜modèle de publication et d'abonnement🎜🎜🎜en créant un graphique de dépendances pour suivre les dépendances des données. Un graphique de dépendances est un graphique qui décrit quelles données dépendent de quelles données. Lorsque les données changent, le système réactif de Vue 3 déclenche automatiquement les mises à jour des vues. En effet, il suit les modifications des données dans le graphe de dépendances et le fait en les associant aux mises à jour de la vue🎜🎜Ici, je liste le code démontré par Youda dans Vue Master comme exemple simple :🎜rrreee🎜 Analysons ce code : 🎜🎜

• Définir un attribut subscribe comme liste d'abonnés pour stocker toutes les informations sur les abonnés
• depend est utilisée pour gérer les dépendances, c'est-à-dire c'est-à-dire la variable dont dépend l'abonné.
• notifier La fonction est utilisée pour informer tous les abonnés de la valeur de la variable a changé

. 🎜🎜Lorsque la valeur de la variable change, elle peut automatiquement avertir tous les abonnés de mettre à jour🎜

🎜Vue2 Object.defineProperty🎜

🎜En fait, à l'ère Vue2, la réactivité a été implémentée par Object.defineProperty, mais dans Vue3, elle a été basculée vers Proxy, attendons de voir la raison combinée avec le code réel ; Vue2 est implémenté : 🎜rrreee🎜 Une API réactive aussi simple est implémentée 🎜🎜 Mais les défauts ici sont également évidents : 🎜 Dans Vue 2.x, l'objet transmis sera directement modifié par <code>Vue.observable . Dans Vue3, un proxy réactif sera renvoyé et l'objet source sera modifié directement. Il ne répond toujours pas🎜🎜🎜Cela conduit à :🎜🎜

• Lorsque nous ajoutons ou supprimons les propriétés de l'objet, la réactivité de Vue2 ne peut pas être détectée, car Vue effectuera une conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit donc exister sur l'objet <code>data pour que Vue pour le convertir en un réactif
• Impossible de détecter 🎜array🎜 Changements dans indice et longueur

🎜🎜Bien sûr, il s'agit d'un historique À cette époque, ES5 ne pouvait choisir que Object.definProperty, mais dans la version ES6, il y a plus de Proxy et la réactivité de Vue a été améliorée🎜

🎜Le proxy de Vue3🎜

🎜 Vue3 utilise Proxy pour surveiller les modifications des données. Par rapport à Vue2, il résout non seulement les problèmes ci-dessus, mais présente également les avantages suivants : 🎜🎜

• Plus besoin d'utiliser vue .$set pour déclencher la réactivité, ce qui donne au code un aspect plus 🎜Introduction🎜
• Détection complète des changements de tableau, éliminant conditions limites invalides dans Vue2
• Réduire la quantité de code réactif écrit dans Vue3, ce qui rend notre développement plus pratique

🎜🎜Jetons un coup d'œil à ce à quoi ressemble le code réel : 🎜rrreee🎜Collectez les dépendances en 🎜en utilisant des objets 🎜La manière d'implémenter la réactivité est l'essence même de la réactivité de Vue3🎜

🎜ref🎜

🎜Il y a une phrase dans la documentation officielle : reactive() sont finalement dues au fait que JavaScript ne dispose pas de mécanisme de "référence" pouvant agir sur tous les types valeur, et les limitations de reactive sont : 🎜🎜<ul> <li>Peut gérer uniquement les structures de données observables, telles que les tableaux et les objets ; les structures de données non observables, telles que les types de données primitifs, ne peuvent pas être surveillées.</li> <li>Il ne peut traiter que les données définies dans le composant où elles se trouvent. , mais ne peut pas traiter les variables globales</li> </ul>🎜 🎜À l'heure actuelle, <code>ref est nécessaire pour le 🎜type de données de base🎜, ce qui compense les défauts du réactif. . Pour faire simple, ref est plus adapté aux simples variables uniques Value (mais la plupart du temps dans le développement réel, tout tourne autour de ref hahahaha🎜🎜Au fait, c'est dommage que la proposition de sucre de syntaxe réactif ait été annulée🎜

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!