Zusammenfassung einiger Punkte, die Sie kennen müssen, um Vue.js zu verbessern

Dieses Mal werde ich Ihnen eine Zusammenfassung dessen geben, was Sie über die Verbesserung von Vue.j wissen müssen. Was sind die Vorsichtsmaßnahmen für die Verbesserung von Vue.j? .

Der erste Trick: Beobachter, die Komplexität vereinfachen

Szenenwiederherstellung:

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

Wenn die Komponente erstellt wird, rufen wir die Liste einmal ab und überwachen gleichzeitig das Eingabefeld. Jedes Mal, wenn eine Änderung auftritt, rufen wir die gefilterte Liste erneut ab. Gibt es eine Möglichkeit, sie zu optimieren?

Bewegungsanalyse:

Erstens können Sie in Watchern direkt den wörtlichen Namen der Funktion verwenden. Zweitens bedeutet die Deklaration „immediate: true“, dass sie sofort ausgeführt wird, wenn die Komponente erstellt wird.

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

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

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

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

Bewegungsanalyse:

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

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

Schließlich 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: Frässchlüssel, der das Geld von unten wegnimmt

Szenenwiederherstellung:

Die folgende Szene bricht vielen Programmierern wirklich das Herz ... 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 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, wie folgt auf Änderungen in $route zu warten, um Daten 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){
 }
}

Der Fehler wurde behoben, aber ist es nicht zu unelegant, jedes Mal so zu schreiben? Wir halten uns an den Grundsatz „Sei faul, wenn du kannst“ 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) {
  // ...
 }
}

Bewegungsanalyse:

Wie können wir diesen Effekt erzielen? Die Antwort besteht darin, der Router-Ansicht einen eindeutigen Schlüssel 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>

Der vierte Trick: die allmächtige Renderfunktion

Szenenwiederherstellung:

Vue verlangt, dass jede Komponente nur ein Root-Element haben kann. 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.

Bewegungsanalyse:

Gibt es eine Möglichkeit, das Problem zu lösen? Die Antwort lautet „Ja“, aber zu diesem Zeitpunkt müssen wir die Funktion „render()“ verwenden, um HTML anstelle einer Vorlage zu erstellen. 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 zu verwenden. v-wenn. (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>
 )
}

Fünfter Zug: High-End-Komponenten, die ohne Züge gewinnen können

Wichtige Punkte: Dieser Zug ist äußerst kraftvoll, bitte beherrschen Sie ihn unbedingt

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 der untergeordneten Komponente ausgegeben werden. 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>

Es gibt mehrere Optimierungspunkte wie folgt:

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

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

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

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

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

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

推荐阅读：

vue的新手入门教程

Vue项目怎样分环境打包

Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Punkte, die Sie kennen müssen, um Vue.js zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!