Le constructeur et le cycle de vie qui doivent être appris chaque jour.

Constructeur

Chaque application Vue.js commence par créer une instance racine de Vue via le constructeur Vue:

 var vm = new Vue ({// Options})

Une instance Vue est en fait le ViewModel décrit en mode MVVM - de sorte que le nom de variable VM est souvent utilisé dans les documents.

Lors de l'instanciation de Vue, vous devez passer dans un objet d'option, qui peut contenir des options telles que les données, les modèles, les éléments de montage, les méthodes, les crochets du cycle de vie, etc. Toutes les options peuvent être consultées dans la documentation de l'API.

Le constructeur Vue peut être étendu pour créer des constructeurs de composants réutilisables avec des options prédéfinies:

 var myComponent = vue.Extend ({// Options d'extension}) // Toutes les instances `myComponent` seront créées avec des options d'extension prédéfinies var myComponentInstance = new myComponent ()

Bien que les instances d'extension puissent être créées impérativement, dans la plupart des cas, le constructeur de composants est enregistré en tant qu'élément personnalisé, puis utilisé de manière déclarative dans le modèle. Nous expliquerons le système des composants en détail plus tard. Maintenant, il vous suffit de savoir que tous les composants Vue.js sont en fait des instances Vue étendues.

Propriétés et méthodes

Chaque instance Vue proxyra toutes les propriétés de son objet de données:

 var data = {a: 1} var vm = new Vue ({data: data}) vm.a === data.a // -> true // Les propriétés de réglage affecteront également les données d'origine vm.a = 2data.a // -> 2 // ... vice versa data.a = 3vm.a // -> 3

Notez que seuls ces attributs proxy sont réactifs. Si une nouvelle propriété est ajoutée à l'instance après la création de l'instance, elle ne déclenche pas de mise à jour de la vue. Nous discuterons en détail du système de réponse plus tard.

En plus de ces attributs de données, les instances VUE exposent certains attributs et méthodes d'instance utiles. Ces propriétés et méthodes ont un préfixe $ pour distinguer les attributs de données du proxy. Par exemple:

 var data = {a: 1} var vm = new Vue ({el: '#example', data: data}) vm. $ data === data // -> truevm. $ el === document.getElementByid ('example') // -> true // $ watch est une méthode d'instance vm. $ watch ('a', fonction (newVal, oldval) {// this callback ira `` A '' est modifié})

Reportez-vous à la documentation de l'API pour afficher toutes les propriétés et méthodes d'instance.

Cycle de vie de l'instance

Une instance VUe a une série d'étapes d'initialisation lorsqu'elle est créée - par exemple, il nécessite d'établir des observations de données, de compilation des modèles et de créer les liaisons de données nécessaires. Dans le processus, il appellera également certains crochets de cycle de vie, offrant une opportunité d'exécution pour la logique personnalisée. Par exemple, le crochet créé est appelé une fois l'instance créée:

 var vm = new Vue ({data: {a: 1}, créé: function () {// `this` pointe vers la console d'instance VM.log ('a is:' + this.a)}}) // ->" a is: 1 "

Il existe également d'autres crochets appelés à différentes étapes du cycle de vie de l'instance, comme compilé, prêt, détruit. Ce crochet pointe vers l'instance Vue qui l'appelle. Certains utilisateurs peuvent demander si Vue.js a le concept de "contrôleur"? La réponse est, non. La logique personnalisée du composant peut être divisée en ces crochets.

Diagramme du cycle de vie

La figure suivante illustre le cycle de vie de l'instance. Vous n'avez pas besoin de tout comprendre tout de suite, mais cela vous aidera à l'avenir.

Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.