Quel est le cœur de vue

青灯夜游
Libérer: 2022-01-11 18:26:49
original
11266 Les gens l'ont consulté

vue a deux noyaux : 1. Basé sur les données, c'est-à-dire une liaison bidirectionnelle des données, permettant au contenu de la vue (DOM) de changer à mesure que les données changent 2. Système basé sur des composants, qui peut étendre le HTML ; éléments et les encapsuler le code.

Quel est le cœur de vue

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

  • Piloté par les données

  • Système composé

1. Piloté par les données, c'est-à-dire la liaison bidirectionnelle des données

  • Le noyau réactif. 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
    getters. /setteurs.

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

  • 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. Lorsque le

  • setter est défini, la mise à jour de la dépendance sera déclenchée. Plus tard, lorsque le setter de la dépendance sera déclenché, l'observateur sera averti, provoquant ainsi le nouveau rendu de son composant associé.

2. Système basé sur des composants

Basé sur des composants

étend les éléments HTML et encapsule le code réutilisable. Chaque composant correspond à un ViewModel. Chaque zone visuelle/interactive indépendante de la page peut être considérée comme un composant. Chaque composant correspond à un répertoire de projet, et les différentes ressources nécessaires au composant sont conservées dans ce répertoire. Une page est un conteneur de composants, et les composants peuvent être imbriqués et combinés librement pour former une page complète.

Options de base du composant :

  • Modèle (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.

  • 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é.

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

  • Méthodes : les modifications apportées aux données sont généralement effectuées dans le cadre des méthodes du composant.

  • 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.

  • 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal