Résumé des questions clés du VUE

Cet article résume les points importants et difficiles de VUE et partage le code en détail. Les amis intéressés peuvent s'y référer pour référence.

1. Trois méthodes de montage des composants

Montage automatique

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Montage manuel

// 可以实现延迟按需挂载
<p id="app"> {{name}} </p> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: &#39;张三&#39;} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }

// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: &#39;<p>{{message}}</p>&#39;, 
 data: function () { 
 return { 
  message: &#39;message&#39;
  } 
 } 
 }) 
 new app().$mount(&#39;#app&#39;) // 创建 app实例，并挂载到一个元素上

2. La manière de routage des paramètres

<p>
  <!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:&#39;/login&#39;,params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: &#39;/login&#39;, query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: true}}">亲，请登录</router-link>
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

3. Compréhension de render:h => h=>h(App) est la méthode d'écriture de la fonction flèche dans ES6, qui équivaut à render:function(h){return h(App);}.

1 Dans la fonction flèche, cela pointe vers. l'objet en dehors de la fonction qui l'enveloppe.

2.h est l'alias de creatElement, la gestion générale de l'écosystème vue

3.template :'6869895f5d1da417a80af13d85b70d77', composants :{App} utilisés ensemble et séparément render :h=>h(App) obtiendra le même effet

Le premier reconnaît la balise d477f9ce7bf77f53fbcf36bec1b69b7a, et le second analyse directement l'identifiant sous le modèle comme le p de l'application (en ignorant le existence du modèle)

4. Compréhension de Vue.nextTick()

new Vue({
 el: '#app', // 相当于 new Vue({}).$mount('#app');
 template: &#39;<App/>&#39;, // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图，然后提供给el挂载
 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图，然后提供给el挂载
  App
 }
});

Les opérations liées au DOM sont écrites dans le rappel de fonction pour garantir que le DOM a été rendu

L'origine de nextTick :

Parce que la mise à jour de la vue basée sur les données de VUE est asynchrone, c'est-à-dire que lorsque les données sont modifiées, la vue ne sera pas sera mis à jour immédiatement, mais attendra que toutes les modifications de données dans la même boucle d'événements soient terminées, puis mettra à jour la vue de manière uniforme.

Minutage de déclenchement de nextTick :

Après les modifications des données dans la même boucle d'événements, le DOM termine la mise à jour et le rappel dans nextTick(callback) est immédiatement exécuté.

Scénario d'application :

Besoin d'opérer en fonction de la nouvelle vue après la mise à jour de la vue.

Les opérations DOM effectuées dans la fonction hook créée() du cycle de vie de Vue doivent être placées dans la fonction de rappel de Vue.nextTick(). Quelle en est la raison ? La raison est que le DOM n'est pas rendu du tout lorsque la fonction hook create() est exécutée, et les opérations DOM à ce moment sont vaines, donc le code js pour les opérations DOM doit être placé dans Vue In. la fonction de rappel de nextTick(). À cela correspond la fonction hook montée, car tous les montages et rendus DOM ont été terminés lorsque cette fonction hook est exécutée, il n'y aura aucun problème pour effectuer des opérations DOM dans cette fonction hook.

Lorsqu'une opération doit être effectuée après les modifications des données et que cette opération nécessite l'utilisation d'une structure DOM qui change à mesure que les données changent, cette opération doit être placée dans la fonction de rappel de Vue.nextTick() .

Un bref résumé de la boucle d'événements :

Exécution de code synchrone -> Recherchez la file d'attente asynchrone, poussez vers la pile d'exécution, exécutez le rappel1 [boucle d'événement 1] -> Recherchez la file d'attente asynchrone, insérez-la dans la pile d'exécution, exécutez le rappel2 [boucle d'événement 2]... c'est-à-dire que chaque rappel asynchrone formera finalement sa propre boucle d'événement indépendante. En combinaison avec l'origine de nextTick, nous pouvons déduire le moment du déclenchement de nextTick dans chaque boucle d'événement :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser Angular CLI pour les tests unitaires et les tests E2E

L'utilisation d'Angular CLI pour Build and Serve explique dans détail

Comment générer des itinéraires à l'aide de Angular CLI

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!