Zusammenfassung allgemeiner Wissenspunkte in der Vue.js-Entwicklung-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen eine Zusammenfassung der allgemeinen Wissenspunkte in der Vue.js-Entwicklung geben. Was sind die Vorsichtsmaßnahmen über allgemeine Wissenspunkte in der Vue.js-Entwicklung? ein Blick.

Nachdem die meisten Menschen einige grundlegende APIs von Vue.js beherrschen, können sie bereits normal Front-End-Websites entwickeln. Wenn Sie jedoch Vue nutzen möchten, um effizienter zu entwickeln und ein Vue.js-Meister zu werden, müssen Sie die fünf Tricks, die ich Ihnen unten beibringen werde, ernsthaft studieren.

Erster Schritt: Vereinfachte Beobachter

Szenenwiederherstellung:

created(){
  this.fetchPostList()
},
watch: {
  searchInputValue(){
    this.fetchPostList()
  }
}

Nach dem Login kopieren

Wenn die Komponente erstellt ist, holen wir uns einmal die Liste und hören uns die Eingabe an Gleichzeitig ist es sehr üblich, die gefilterte Liste bei jeder Änderung erneut abzurufen. Gibt es eine Möglichkeit, sie zu optimieren?

Bewegungsanalyse:

Erstens können Sie in Beobachtern direkt den wörtlichen Namen der Funktion verwenden ; zweitens bedeutet die Deklaration „immediate:true“, dass dies der Fall sein wird wird sofort beim Erstellen der Komponente ausgeführt.

watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}

Nach dem Login kopieren

Zweiter Schritt: Ein für alle Mal Komponentenregistrierung

Szenenwiederherstellung:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

Nach dem Login kopieren

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>

Nach dem Login kopieren

Wir haben eine Reihe grundlegender UI-Komponenten geschrieben und dann alle Wenn wir diese Komponenten verwenden müssen, müssen Sie sie zuerst importieren und dann die Komponenten deklarieren, was sehr mühsam ist! Wir müssen uns an den Grundsatz halten, faul zu sein, wenn Sie können, und Wege zur Optimierung finden!

Bewegungsanalyse:

Wir müssen das Artefakt-Webpack verwenden und die Methode require.context() verwenden, um unseren eigenen (Modul-)Kontext zu erstellen und eine automatische dynamische Anforderung zu erreichen Komponenten. Diese Methode benötigt drei Parameter: das zu durchsuchende Ordnerverzeichnis, ob seine Unterverzeichnisse ebenfalls durchsucht werden sollen und einen regulären Ausdruck, der mit Dateien übereinstimmt.

Wir fügen eine Datei namens global.js im Komponentenordner hinzu und verwenden Webpack, um alle erforderlichen Basiskomponenten dynamisch in diese Datei zu packen.

import Vue from 'vue'
function capitalizeFirstLetter(string) {
 return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(
 '.', false, /\.vue$/
  //找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
 const componentConfig = requireComponent(fileName)
 const componentName = capitalizeFirstLetter(
  fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
 )
 Vue.component(componentName, componentConfig.default || componentConfig)
})

Nach dem Login kopieren

Zuletzt importieren wir „components/global.js“ in main.js und können diese Grundkomponenten dann jederzeit und überall verwenden, ohne sie manuell einzuführen.

Dritter Schritt: Der Router-Schlüssel, der einen großen Schlag einsteckt

Szenenwiederherstellung:

Die folgende Szene hat vielen Programmierern wirklich das Herz gebrochen. Zunächst einmal verwendet jeder standardmäßig den Vue-Router, um die Routing-Steuerung zu implementieren.

Angenommen, wir schreiben eine Blog-Website und die Anforderung besteht darin, von /post-page/a nach /post-page/b zu springen. Dann stellten wir überraschend fest, dass die Daten nach dem Seitensprung nicht aktualisiert wurden? ! Der Grund dafür ist, dass der Vue-Router „intelligent“ erkannt hat, dass es sich um dieselbe Komponente handelt, und dann beschlossen hat, diese Komponente wiederzuverwenden, sodass die von Ihnen in der erstellten Funktion geschriebene Methode überhaupt nicht ausgeführt wurde. Die übliche Lösung besteht darin, Änderungen in $route zu überwachen, um die Daten wie folgt zu initialisieren:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
}, 
watch: {
 '$route': {
  handler: 'resetData',
  immediate: true
 }
},
methods: {
 resetData() {
  this.loading = false
  this.error = null
  this.post = null
  this.getPost(this.$route.params.id)
 },
 getPost(id){
 }
}

Nach dem Login kopieren

Der Fehler ist behoben, aber ist es zu unelegant, jedes Mal so zu schreiben? Wir halten uns an das Prinzip „Faul sein, wenn Sie können“ und hoffen, dass der Code so geschrieben wird:

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
  // ...
 }
}

Nach dem Login kopieren

Bewegungsanalyse:

Wie können wir diesen Effekt erzielen? besteht darin, einen eindeutigen Schlüssel für die Router-Ansicht hinzuzufügen, sodass die Komponente neu erstellt wird, auch wenn es sich um eine öffentliche Komponente handelt, solange sich die URL ändert. (Obwohl ein Teil der Leistung verloren geht, werden unendlich viele Fehler vermieden.) Beachten Sie gleichzeitig, dass ich den Schlüssel direkt auf den gesamten Weg der Route gelegt habe und so zwei Fliegen mit einer Klappe geschlagen habe.

<router-view :key="$route.fullpath"></router-view>

Nach dem Login kopieren

Der vierte Trick: die allmächtige Renderfunktion

Szenenwiederherstellung:

vue erfordert, dass jede Komponente nur ein Wurzelelement haben kann, wenn Sie Wenn Sie mehrere Root-Elemente haben, meldet Ihnen Vue einen Fehler

<template>
 <li
  v-for="route in routes"
  :key="route.name"
 >
  <router-link :to="route">
   {{ route.title }}
  </router-link>
 </li>
</template>
 ERROR - Component template should contain exactly one root element. 
  If you are using v-if on multiple elements, use v-else-if 
  to chain them instead.

Nach dem Login kopieren

Analyse der Bewegungen:

Gibt es eine Möglichkeit, das Problem zu beheben? Die Antwort lautet „Ja“, aber dieses Mal müssen wir das Rendering verwenden ()-Funktion zum Erstellen von HTML, nicht einer Vorlage. Tatsächlich besteht der Vorteil der Verwendung von js zum Generieren von HTML darin, dass es äußerst flexibel und leistungsstark ist und Sie nicht lernen müssen, die Befehls-API mit eingeschränkten Funktionen von Vue wie v-for und v-if zu verwenden. (reactjs verwirft die Vorlage vollständig)

functional: true,
render(h, { props }) {
 return props.routes.map(route =>
  <li key={route.name}>
   <router-link to={route}>
    {route.title}
   </router-link>
  </li>
 )
}

Nach dem Login kopieren

Fünfter Zug: Hochstufige Komponenten, die ohne Züge gewinnen können

Wichtige Punkte: Dieser Zug ist bitte extrem mächtig Stellen Sie sicher, dass Sie

beherrschen. Wenn wir Komponenten schreiben, müssen wir normalerweise eine Reihe von Requisiten von der übergeordneten Komponente an die untergeordnete Komponente übergeben, und gleichzeitig lauscht die übergeordnete Komponente auf eine Reihe von Ereignissen, die von ausgegeben werden die untergeordnete Komponente. Zum Beispiel:

//父组件
<BaseInput 
  :value="value"
  label="密码" 
  placeholder="请填写密码"
  @input="handleInput"
  @focus="handleFocus>
</BaseInput>
//子组件
<template>
 <label>
  {{ label }}
  <input
   :value="value"
   :placeholder="placeholder"
   @focus=$emit(&#39;focus&#39;, $event)"
   @input="$emit(&#39;input&#39;, $event.target.value)"
  >
 </label>
</template>

Nach dem Login kopieren

hat die folgenden Optimierungspunkte:

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子，无需声明。方法如下：

<input
   :value="value"
   v-bind="$attrs"
   @input="$emit(&#39;input&#39;, $event.target.value)"
  >

Nach dem Login kopieren

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做，只是把event传回给父组件而已，那其实和上面类似，我完全没必要显式地申明：

<input
  :value="value"
  v-bind="$attrs"
  v-on="listeners"
>
computed: {
 listeners() {
  return {
   ...this.$listeners,
   input: event => 
    this.$emit('input', event.target.value)
  }
 }
}

Nach dem Login kopieren

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是，由于我们input并不是BaseInput这个组件的根节点，而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false，这些默认行为将会被去掉, 以上两点的优化才能成功。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！