Front-End-Grundlagen: Vue lustiges einheimisches Schreiben (Schreiben nach der Arbeit)

1. Was sind data:{} und data(){return{}}?

vue-Instanz

new Vue({

    el:'#app',
    data:{
        name:'李四'

    }

})

Komponenteninstanz

const aaa = Vue.extent({
    data(){
        return {
            name:''
        }
    }
})

Warum können Vue-Instanzen so geschrieben werden, Komponenteninstanzen jedoch nicht? Der Grund dafür ist, dass Komponenten im zugrunde liegenden Prinzip wiederverwendet werden können. Wenn Sie die Komponenten veränderbar machen, ist das erledigt. Schauen Sie sich den folgenden Code an.

 let x1 = {
    a:1,
    b:2
   }
   let x2 = {}
  
   x2 = x1
   x1.a = 99
   console.log('获取内容', x1, x2)

Warum ist das? Dabei geht es darum, unsere Referenztypvariable direkt an eine andere Person weiterzugeben, was der Weitergabe der Adresse an andere Personen gleichkommt. Wie kann dies geschehen, wenn man den Türschlüssel an andere Personen weitergibt? Lass es uns überarbeiten.

function x1() {
      return {
        a:1,
        b:2
      }
    }
   let x2 = x1()
    let x3 = x1()
   x3.a = 99
   console.log('获取内容', x3, x2)

 

Okay, es ist so magisch. Es ist tatsächlich gleichbedeutend damit, dem Besitzer eine Funktion zu geben, anstatt sie wie zuvor direkt selbst zu geben. Wenn wir also in der IT-Welt wiederverwenden möchten, verwenden wir einfach die Funktionsrückgabe.

Also da ist

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2. Was ist das Implementierungsprinzip der Array-Methoden push() und unshift()?

push() wird am Ende hinzugefügt, unshift() wird am Anfang hinzugefügt und wird oft als oben bezeichnet.

function pushDemo(arr,val) {
      arr[arr.length] = val
      return arr
    }

 Wenn wir es dann am Kopf hinzufügen, müssen wir eine Sache tun und alle Elemente um eine Position nach hinten verschieben.

function unshiftDemo(arr,val) {
      for (let i = arr.length;i>=0;--i) {
        arr[i] = arr[i-1]
      }
      arr[0] = val
      return arr
    }

3. Schreiben Sie eine Funktion zum Ausdrucken der durchschnittlichen Punktzahl der Schüler (zweidimensionales Array).

 function average() {
      let arr = [[1,2,3],[4,5,6],[7,8,9]]
      let total = 0
      let avergeNum = 0.0
      for(let row = 0;row<arr.length;row++) {
        for(let i = 0;i<arr[row].length;i++){
          total += arr[row][i]
        }
        avergeNum = total/arr[row].length
        console.log('student' + parseInt(row+1) + 'averageNum' + avergeNum.toFixed(2))
        total = 0
        avergeNum = 0.0
      }
    }

4. VueComponent.prototype._proto_ === Vue.prototype Was ist die integrierte Beziehung von Vue?

Tatsächlich findet VueComponent.prototype seinen eigenen Prototyp und fährt dann mit _proto_ fort, dem Prototyp des Vue-Konstruktors. Diese beiden verweisen auf dasselbe. Lassen Sie uns darüber nachdenken. Im Allgemeinen wird der Prototyp schließlich das endgültige Objekt finden, aber VueComponent .prototype._proto_ Zeigt auf Vue.prototype. Der Vorteil davon ist, dass alle Methoden im Vue-Prototyp von VueComponent gefunden werden können. Liebling, das ist der inspirierendste Ort.

Um es kurz zu erwähnen: Wie generieren wir VueComponent? Wir müssen diesen Konstruktor über Vue.extend () generieren.

Mit anderen Worten, die Methode von Vue

  5. Warum wird module.exports in Vue.config.js verfügbar gemacht?

Als Front-End-Person tippe und tippe ich den ganzen Tag. Ich verwende den ganzen Tag über Import und Exfort-Standard, aber module.exoprts wird nicht häufig verwendet. Zunächst müssen wir verstehen, dass die Konfigurationsdatei das gesamte Projekt verwaltet , und Webpack besteht aus common.js. Wenn Sie diese Vue.config.js konfigurieren, wird sie mit Webpack zusammengeführt und entsprechend dem, was Sie zur Personalisierung des Projekts geschrieben haben, überschrieben.

Guess you like

Origin blog.csdn.net/2201_75705263/article/details/135241090