Zusammenfassung der wichtigsten VUE-Themen

Dieser Artikel fasst die wichtigen und schwierigen Punkte von VUE zusammen und teilt den Code im Detail. Interessierte Freunde können ihn als Referenz verwenden.

Drei Montagemethoden für Komponenten

Automatische Montage

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

Manuelle Montage

// 可以实现延迟按需挂载
<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 , Der Weg der Routing-Parameter

<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. Verstehen Sie render:h => h (App)

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
 }
});

:h=>h (App). Pfeilfunktions-Schreibmethode in ES6, die render:function(h){return h(App);} entspricht.

1. Dies in der Pfeilfunktion zeigt außerhalb der Funktion, die dies auf das Objekt umschließt .

2.h ist der Alias ​​von creatElement, der allgemeinen Verwaltung des Vue-Ökosystems

3.template:'6869895f5d1da417a80af13d85b70d77', Komponenten:{App} werden zusammen und getrennt verwendet render :h=>h(App) erzielt den gleichen Effekt

Ersteres erkennt das d477f9ce7bf77f53fbcf36bec1b69b7a-Tag und letzteres analysiert die ID unter der Vorlage direkt als p der App (ignoriert). Existenz der Vorlage)

rrreee

4. Verständnis von Vue.nextTick()

Die DOM-bezogenen Operationen werden in den Funktionsrückruf geschrieben, um sicherzustellen, dass das DOM vorhanden ist wurde gerendert

nextTick Origin:

Da die datengesteuerte Ansichtsaktualisierung von VUE asynchron ist, d. h. wenn die Daten geändert werden, wird die Ansicht nicht sofort aktualisiert. Es wird jedoch gewartet, bis alle Datenänderungen in derselben Ereignisschleife abgeschlossen sind.

Trigger-Timing von nextTick:

Nachdem sich die Daten in derselben Ereignisschleife geändert haben, schließt das DOM die Aktualisierung ab und der Rückruf in nextTick(callback) wird sofort ausgeführt.

Anwendungsszenario:

Nach der Aktualisierung der Ansicht muss auf der Grundlage der neuen Ansicht gearbeitet werden.

DOM-Operationen, die in der Hook-Funktion „created()“ des Vue-Lebenszyklus ausgeführt werden, müssen in der Rückruffunktion von Vue.nextTick() platziert werden. Was ist der Grund? Der Grund dafür ist, dass das DOM überhaupt nicht gerendert wird, wenn die Hook-Funktion create() ausgeführt wird, und DOM-Operationen zu diesem Zeitpunkt vergeblich sind, sodass der js-Code für DOM-Operationen in Vue eingefügt werden muss. In der Callback-Funktion von nextTick(). Dies entspricht der gemounteten Hook-Funktion. Da bei Ausführung dieser Hook-Funktion das gesamte Mounten und Rendern des DOM abgeschlossen ist, treten bei der Ausführung von DOM-Vorgängen in dieser Hook-Funktion keine Probleme auf.

Wenn eine Operation ausgeführt werden muss, nachdem sich die Daten geändert haben, und diese Operation die Verwendung einer DOM-Struktur erfordert, die sich ändert, wenn sich die Daten ändern, sollte diese Operation in die Rückruffunktion von Vue.nextTick() eingefügt werden .

Eine kurze Zusammenfassung der Ereignisschleife:

Synchronisierte Codeausführung -> Suchen Sie die asynchrone Warteschlange, verschieben Sie sie in den Ausführungsstapel und führen Sie Callback1 aus [Ereignisschleife 1] -> Asynchrone Warteschlange finden, in den Ausführungsstapel verschieben, Rückruf2 [Ereignisschleife 2] ausführen ... das heißt, jeder asynchrone Rückruf bildet schließlich seine eigene unabhängige Ereignisschleife. In Kombination mit dem Ursprung von nextTick können wir den Zeitpunkt der Auslösung von nextTick in jeder Ereignisschleife ableiten:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Angular CLI für Unit-Tests und E2E-Tests

Die Verwendung von Angular CLI für Build and Serve wird in erklärt Detail

So generieren Sie Routen mit Angular CLI

Das obige ist der detaillierte Inhalt vonZusammenfassung der wichtigsten VUE-Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!