Quels sont les deux cœurs de vuejs

Les deux cœurs de vuejs sont des systèmes basés sur les données et des composants. La gestion des données est une liaison bidirectionnelle de données, utilisée pour garantir la cohérence des données et des vues. Le système de composants peut résumer la page en plusieurs modules relativement indépendants ; il peut réaliser la réutilisation du code, améliorer l'efficacité du développement et la qualité du code, et faciliter la maintenance du code.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Les deux noyaux de vue.js : 1. Basé sur les données------------- 2. Système de composants

1 Basé sur les données, c'est-à-dire une liaison bidirectionnelle de. data

Data Après une modification, la page sera restituée. C'est la réactivité de Vue. Alors, comment tout cela se fait-il ?

Pour terminer ce processus, nous devons :

• Détecter les changements dans les données
• Collecter les données sur lesquelles la vue s'appuie
• Lorsque les données changent, "notifier" automatiquement la partie de la vue qui doit être mise à jour, et mettez-le à jour

Correspondre à un professionnel Les dictons courants sont :

• Détournement de données/proxy de données
• Collecte de dépendances
• Modèle de publication et d'abonnement

C'est-à-dire : Le cœur de la réactivité de Vue est que les dépendances seront collectées pendant le getter, et les mises à jour des dépendances seront déclenchées pendant le setter

Vue parcourra toutes les propriétés de l'objet dans les données, et utilisera Object.defineProperty pour convertir toutes ces propriétés en getter/setter.

Ces getters/setters sont invisibles pour l'utilisateur, mais en interne, ils permettent à Vue de suivre les dépendances et de notifier les changements lorsque les propriétés sont accédées et modifiées.

Chaque instance de composant correspond à une instance d'observateur, qui enregistre les propriétés des données "touchées" en tant que dépendances pendant le processus de rendu du composant.

Nous collecterons les dépendances pendant le getter. La collecte des dépendances est la collecte des observateurs de modifications des données d'abonnement. Le but de la collecte des dépendances est d'informer les abonnés correspondants de traiter la logique appropriée lorsque les données réactives changent. La mise à jour de la dépendance sera déclenchée lorsque le setter est déclenché. Plus tard, lorsque le

setter de la dépendance est déclenché

, informera l'observateur, provoquant ainsi le nouveau rendu de son composant associé.

Résumé :

1) Principe :

Lors de la création d'une instance Vue, vue parcourra les propriétés de l'option data et utilisera Object.defineProperty pour ajouter des getters et des setters aux propriétés afin de détourner la lecture des données ( les getters sont utilisés pour dépendre de la collection, le setter est utilisé pour distribuer les mises à jour) et suit en interne les dépendances, notifiant les changements lorsque les propriétés sont accédées et modifiées.

Chaque instance de composant aura une instance d'observateur correspondante, qui enregistrera tous les attributs de données de la dépendance pendant le processus de rendu du composant (collecte des dépendances, ainsi que les instances d'observateur et d'utilisateur calculées lorsque la dépendance est modifiée ultérieurement). méthode setter L'instance d'observateur qui dépend de ces données sera invitée à recalculer (distribuer les mises à jour),

, restituant ainsi ses composants associés.

2) Processus de mise en œuvre :

Nous savons déjà que pour mettre en œuvre une liaison bidirectionnelle de données, nous devons d'abord détourner et surveiller les données, nous devons donc mettre en place un observateur pour surveiller tous les attributs. Si l'attribut change, vous devez indiquer à l'abonné Watcher pour voir s'il doit être mis à jour.

Parce qu'il y a de nombreux abonnés, nous avons besoin d'un Dep d'abonnés aux messages pour collecter spécifiquement ces abonnés, puis les gérer de manière uniforme entre l'Observateur et le Watcher. Ensuite, nous avons également besoin d'un analyseur d'instructions Compiler pour analyser et analyser chaque élément de nœud, initialiser les instructions pertinentes dans un observateur d'abonné et remplacer les données du modèle ou lier la fonction correspondante à ce moment-là, lors de l'abonnement. Lorsque l'observateur reçoit le changement de. l'attribut correspondant, il exécutera la fonction de mise à jour correspondante pour mettre à jour la vue. Nous effectuons ensuite les 3 étapes suivantes pour obtenir une liaison bidirectionnelle des données :

1. Implémentez un observateur d'écoute pour détourner et surveiller toutes les propriétés, et informer les abonnés en cas de modifications.

2. Implémentez un observateur d'abonné qui peut recevoir des notifications de changement de propriété et exécuter les fonctions correspondantes pour mettre à jour la vue.

3. Implémentez un analyseur Compile, qui peut analyser et analyser les instructions pertinentes de chaque nœud, et initialiser les abonnés correspondants en fonction des données du modèle initialisées

Remarque : Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外Proxy支持代理数组的变化。Proxy est la méthode utilisée par vue3.0

2. Système de composants

Compréhension :

1) Capable de résumer la page en plusieurs modules relativement indépendants

2) Implémenter la réutilisation et l'amélioration du code ; Efficacité du développement et qualité du code, maintenance facile du code

Options de base pour les composants

1 Modèle : le modèle déclare la relation de mappage entre les données et le DOM qui est finalement affichée à l'utilisateur.

2 Données initiales (data) : L'état des données initiales d'un composant. Pour les composants réutilisables, il s’agit généralement d’un État privé.

3 Paramètres externes acceptés (accessoires) : les données sont transférées et partagées entre les composants via des paramètres.

4 Méthodes : Les modifications des données sont généralement effectuées dans le cadre des méthodes des composants.

5 Hooks de cycle de vie : Un composant déclenchera plusieurs fonctions de hook de cycle de vie. La dernière version 2.0 a considérablement changé le nom de la fonction de cycle de vie.

6 Ressources privées (actifs) : Dans Vue.js, les instructions, filtres, composants, etc. définis par l'utilisateur sont collectivement appelés ressources. Un composant peut déclarer ses propres ressources privées. Les ressources privées ne peuvent être appelées que par le composant et ses sous-composants.

Recommandations associées : "Tutoriel vue.js"

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!