Was ist der Unterschied zwischen Instanzen und Komponenten in VueJS?

Unterschiede: 1. Die Instanz verfügt über einen El-Mount-Punkt, die Komponente jedoch nicht. 2. In der Instanz ist es „data:{}“ und in der Komponente ist es „data(){return{}}“. 3. Die HTML-Elemente der Vue-Instanz werden direkt in die Seite gerendert, während die HTML-Elemente der Komponente in der Vorlage definiert und dann durch Aufrufe in die Seite gerendert werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Als ich das letzte Mal Einzelkomponentenelemente und Routing für Vue geschrieben habe, dachte ich an ein Problem. new Vue({…}) ist eine Vue-Instanz. Ist die Komponente also eine Vue-Instanz?

Analyse

Wie ich bereits sagte, gibt es zwei Entwicklungsmethoden. Eine ist browserbasiert (das heißt, main.js wird direkt in das Skript eingeführt), und die andere ist eine befehlszeilenbasierte Entwicklungsmethode, die von vue-cli (einem Vue-Projekt) erstellt wurde.

Weil die meisten tatsächlichen Projekte Verwenden Sie die Befehlszeilenentwicklungsmethode, daher sprechen wir immer noch über Komponenten in der Befehlszeilenentwicklungsmethode.

In den main.js des Projekts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

Und im App.vue-Code

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

Die Darstellungen unter dem lila Text können Sie ignorieren.

Vergrößern und vergleichen

Der Unterschied zwischen Instanzen und Komponenten in VueJS

Die Daten der Komponente sind eine Funktion und die Nichtkomponente sind Daten:{}, Die Komponente nicht Habe die El-Mount-Point-Option. Laut der offiziellen Website handelt es sich bei Komponenten um wiederverwendbare Vue-Instanzen mit einem Namen.

In einem Vue-Projekt ist im Allgemeinen nur eine VUE-Instanz in main.js definiert, und die anderen sind Vue-Komponenteninstanzen. Tatsächlich handelt es sich bei allen um Vue-Instanzen, aber der Einfachheit halber habe ich das nur gesagt. Zusätzlich zur Stammkomponente gibt es in Komponenten viele kleine Komponenten.

Das heißt:

1. Die Vue-Instanz verfügt über el, um das Montageelement anzugeben, die Komponente jedoch nicht, da die Komponente durch Aufrufen auch auf der Rendering-Seite gerendert wird und durch Aufrufen des Komponentennamens direkt gerendert wird.

2. Die Datenattributform der Instanz und der Komponente ist unterschiedlich.

Das Datenattribut in der Vue-Instanz: data:{"name": "aa", "age":18}, das Datenattribut in der Komponente: data(){ return{"name": "aa", "age": 18} },

3 Die HTML-Elemente der Vue-Instanz werden direkt in die Seite gerendert, während die HTML-Elemente der Komponente definiert werden Die Vorlage wird dann durch Aufrufe auf die Seite gerendert

Verwandte Empfehlungen: „

vue.js Tutorial

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Instanzen und Komponenten in VueJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!