Quels sont les deux cœurs de vue.js

Vue.js est une bibliothèque qui fournit une liaison bidirectionnelle des données MVVM, en se concentrant sur le niveau de l'interface utilisateur. L'idée principale est : système de composants basé sur les données.

Basé sur les données :

Le principe d'observation des données de Vue.js utilise ES5Object.defineProperty et les propriétés de mémoire pour l'implémentation technique : getter. et setter (donc uniquement compatible avec IE9 et supérieur), peut être appelé un mécanisme d'observation basé sur la collection de dépendances. Le cœur est la VM, à savoir ViewModel, qui assure la cohérence des données et des vues.

watcher : Chaque commande aura un objet correspondant utilisé pour observer les données, appelé watcher, tel que v-text="msg", {{ msg }}, qui sont deux watchers parmi les objets watcher Contient le. éléments DOM associés à restituer.

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Principe du mécanisme d'observation basé sur la collection de dépendances :

1 Transformez les données natives en un "objet observable", généralement, appelez DefineProperty pour modifier les données dans le L'objet de données est un attribut de mémoire. Un objet observable peut avoir un getter ou un setter de valeur.

2 Lors de l'analyse du modèle, c'est-à-dire pendant le processus d'évaluation de l'observateur, chaque objet observable évalué enregistrera l'observateur actuel comme son propre abonné et deviendra une dépendance de l'observateur actuel.

3 Lorsqu'une valeur est attribuée à un objet observable dépendant, il en informera tous les observateurs abonnés à lui-même pour réévaluer et déclencher les mises à jour correspondantes, c'est-à-dire le rendu des modifications DOM associées dans l'objet observateur.

L'avantage de la collecte de dépendances est qu'elle peut suivre avec précision et de manière proactive les modifications des données, sans avoir besoin de déclencher ou d'évaluer manuellement tous les observateurs dans la portée (inconvénients de la mise en œuvre du contrôle sale d'Angular). En particulier, pour les tableaux, vous devez utiliser une méthode variable (telle que push) qui encapsule le tableau pour surveiller les modifications dans le tableau. Lors de l'ajout/suppression d'attributs ou de la modification d'éléments à des positions spécifiques dans le tableau, vous devez également appeler des fonctions spécifiques, telles que obj.$add(key, value), pour déclencher des mises à jour. Ceci est limité par les fonctionnalités linguistiques d’ES5.

Système de composants :

L'interface utilisateur de l'application peut être considérée comme entièrement composée d'arborescences de composants.

Enregistrer un composant :

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

Options de base du composant

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

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 opérations de modification sur les données sont généralement effectuées au sein 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 modifié les noms des fonctions 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.

Webpack est un outil de création de modules frontaux open source. Il fournit une puissante API de chargement pour définir la logique de prétraitement pour différents formats de fichiers. C'est la base du formulaire de composant de fichier unique avec suffixe .vue. Ainsi, sur cette base, le vue-loader développé par Youda permet d'intégrer les trois éléments de modèle, de style et de logique dans le même fichier, formant un format de composant mono-fichier avec le suffixe de fichier .vue, ce qui facilite l'architecture du projet. et référence de développement.

Autres fonctionnalités :

1 Mise à jour asynchrone du DOM par lots : lorsqu'une grande quantité de données change, tous les observateurs concernés seront poussés vers une file d'attente, et chaque observateur La file d'attente ne sera poussé qu’une seule fois. Cette file d'attente sera exécutée de manière asynchrone au prochain tick du processus. Ce mécanisme peut éviter les opérations DOM redondantes causées par de multiples modifications des mêmes données, et peut également garantir que toutes les opérations d'écriture DOM sont exécutées ensemble pour éviter la disposition qui peut être provoquée par la commutation de lecture et d'écriture DOM.

2 Système d'animation : Vue.js fournit un système d'animation simple mais puissant. Lorsque la visibilité d'un élément change, les utilisateurs peuvent non seulement définir facilement l'effet de transition ou d'animation CSS correspondant, mais également utiliser une riche fonction de hook JavaScript. pour le traitement d'animation de niveau inférieur. 3 Évolutivité : en plus des instructions, filtres et composants personnalisés, Vue.js fournit également un mécanisme de mixage flexible qui permet aux utilisateurs de réutiliser des fonctionnalités communes dans plusieurs composants.

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!