Répertoire d'articles
1. Instance Vue
L'utilisation du framework Vue commence par la création d'objets d'instance Vue. Une page peut être considérée comme composée de divers composants, et chaque composant correspond à une instance de Vue. L'instance Vue peut également être considérée comme un mode MVVM partiel, qui est également composé de trois parties: vue (V), modèle (M) et modèle de vue (VM). Prenons comme exemple la structure d'instance de Vue la plus courante:
1.1 Création d'instance et attribut el
Nous disons que Vue est en fait un constructeur (sortie directement les résultats de Vue comme indiqué ci-dessous):
Semblable à la déclaration du constructeur des objets d'instance, la création d'instance de Vue emprunte également des newmots-clés:
new Vue({
// 属性
})
Ou nous pouvons utiliser une variable pour entreprendre. Communément utilisé dans les documents officiels vm, vmpour l' ViewModelacronyme, également confirmé du côté d'une instance d'un objet Vue joué dans la vue du composant est le modèle de rôle (VM) est. Bien sûr, ce nom de variable n'a pas d'importance, haha.
let vm = new Vue({
// 属性
})
Une fois que chaque instance de Vue est créée, il doit d'abord être clair quel modèle HTML elle utilisera, c'est-à-dire pour terminer la liaison de vue du mode MVVM partiel. La valeur d'attribut spécifique utilisée est- el, qui peut accepter un sélecteur CSS comme paramètre (ID, le nom de classe le plus courant).
<div id="app"></div>
let vm = new Vue({
el:"#app"
})
1.2 Attributs des données et méthodes
Nous définissons généralement les propriétés ( property) et les méthodes ( method) du composant dans l'objet d'instance Vue correspondant, c'est-à-dire, dataet les methodspropriétés.
Nous pouvons datadéfinir des valeurs initiales pour les propriétés dans la déclaration, ou datapointer vers un objet global:
let vm = new Vue({
el:"#app",
data:{
name:"zevin"
}
})
var obj = {
name:"zevin"
}
let vm = new Vue({
el:"#app",
data:obj
})
methodsDiverses méthodes d'événement y sont définies, qui peuvent être facilement v-onliées au nœud cible dans le modèle via des instructions. Par exemple, nous ajoutons un événement de clic au modèle showTip:
(la liaison d'événement spécifique sera suivie, regardons d'abord l'excitation)
<div id="app" v-on:click="showTip">{
{
msg}}</div>
let vm = new Vue({
el:"#app",
data:{
msg:"zevin"
},
methods:{
showTip:function(){
alert(this.msg)
}
}
})
L'effet spécifique est illustré dans la figure ci-dessous. Une msgboîte modale contenant la valeur de la variable actuelle apparaît :
2. Cycle de vie
2.1 Huit étapes
Semblable à la vie d'une personne, chaque instance de Vue a également son propre cycle de vie. De la création à la destruction, elle est divisée en huit étapes:
① BeforeCreate (exécuté une seule fois)
avant l'initialisation, les propriétés et méthodes de l'objet d'instance ne peuvent pas être utilisées.
② L'
initialisation créée (exécutée une seule fois)est terminée et l'instance est créée, vous pouvez utiliser les propriétés et les méthodes de l'objet d'instance.
③ beforeMount (exécuté une seule fois)
Avant le montage, déterminez à quel modèle l'instance actuelle est appliquée, et les données à ce stade n'ontpas été liées au modèle.
④ monté (exécuté une seule fois) Le
montage est terminé, c'est-à-dire que les données sont liées au modèle.
⑤ beforeUpdate (exécutable plusieurs fois)
Avant que le DOM virtuel soit mis à jour, il s'agit d'un groupe avec l'étape suivante mise à jour, et il sera appelé à chaque fois que la vue est mise à jour.
⑥ mis à jour (exécutable plusieurs fois)
après la mise à jour du DOM virtuel.
⑦ beforeDestroy (exécuter une seule fois)
avant la destruction, l'instance peut encore être utilisée à ce moment
⑧ Après Destroy (exécution une seule fois)
, l'instance n'est pas disponible.
2.2 Fonction de crochet de cycle de vie
Chaque étape a son propre emplacement et les utilisateurs peuvent également choisir d'ajouter des fonctions de crochet de cycle de vie pour répondre à certaines exigences à différentes étapes. Vérifions maintenant l'exécution de chaque étape en définissant la fonction hook de chaque cycle:
<div id="app"></div>
let vm = new Vue({
el:'#app',
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
Les résultats sont les suivants:
Vous pouvez voir que seules les quatre premières étapes sont générées, car elles ne seront exécutées qu'une seule fois dans tout le cycle de vie de la page. beforeUpdateEt updatedaucune impression n'est juste que nous n'avons pas mis à jour la vue, modifions donc le code maintenant:
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:'#app',
data:{
msg:''
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
Nous avons ajouté une zone de saisie à la vue pour changer la vue. Il est évident dans la figure ci-dessous que la beforeUpdatesomme est imprimée à chaque fois que nous changeons de vue updated.
2.3 Expansion: la méconnaissance des fonctions fléchées
Lorsque nous utilisons le framework Vue pour écrire du code, nous devons appliquer la fonction Flèche ES6 au bon endroit . En raison de la particularité de cela dans la fonction de flèche (non this, elle thissera utilisée comme variable pour rechercher la portée lexicale supérieure jusqu'à ce qu'elle soit trouvée), une utilisation incorrecte conduit souvent à un fonctionnement anormal du code ou même des erreurs. Par exemple, les deux scénarios suivants:
-
Définissez une propriété d'option (équivalente à el, data) dans l'instance pour qu'elle soit égale à une fonction anonyme:
tout comme la fonction hook de cycle de vie icicreated: () => console.log("created"), elle ne doit pas être écrite dans un formulaire, sinonUncaught TypeError: Cannot read property of undefinedune erreur sera signalée . -
Appelez la méthode d'instance de prototype Vue en dehors de l'instance, telle que Vue.prototype. $ Watch () pour ajouter un moniteur:
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:""
}
})
vm.$watch('msg',(newValue, oldValue)=>{
console.log(this.msg);
})
Vous pouvez voir que msgla valeur que nous avons modifiée , le rendu sur la page est correct, mais la sortie du moniteur ici undefinedest parce que nous avons adopté la méthode d'écriture de la fonction flèche. À ce stade, la fonction this dans la flèche pointe vers le global et ne pointe pas vers l'objet d'instance Vue actuel vm.
Il est normal de passer à la forme d'une fonction anonyme ordinaire, je ne vais donc pas le démontrer ici. Ou déplacez le moniteur vers l'objet d'instance, et il n'y aura aucune erreur dans les deux sens. (cela pointe vers l'objet d'instance Vue actuel vm et aucune erreur ne sera signalée)
let vm = new Vue({
el:"#app",
data:{
msg:""
},
watch:{
msg:(newValue, oldValue)=>{
console.log(newValue, oldValue);
}
}
})
2.4 Icône du site Web officiel
Il y a aussi une longue image dans le document officiel du site Web pour présenter en détail le cycle de vie de l'instance Vue. Jetez un coup d'œil ici ...
