Best Practices für Vue.js (fünf Tipps, um Sie zum Vue.js-Meister zu machen)

Dieser Artikel dient hauptsächlich dazu, Ihnen die Best Practices von Vue.js mitzuteilen, fünf Tipps, um Sie zu einem Vue.js-Meister zu machen. Ich hoffe, er kann Freunden in Not helfen

Für die meisten Menschen ist das Beherrschen von Vue Nach ein paar grundlegenden .js-APIs 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()
    }
}

Wenn die Komponente erstellt wird, erhalten wir die Liste einmal und dann Gleichzeitig ist es sehr üblich, das Eingabefeld zu überwachen und 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 sie sofort ausgeführt wird, wenn Die Komponente wird erstellt.

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 Menge geschrieben Grundlegende UI-Komponenten, und 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 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, um eine automatische dynamische Anforderung an Komponenten zu erreichen. Diese Methode benötigt drei Parameter: das zu durchsuchende Ordnerverzeichnis, ob seine Unterverzeichnisse ebenfalls durchsucht werden sollen und einen regulären Ausdruck zum Abgleichen von Dateien.

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

Endlich sind wir in main.js import 'components/global.js' und können diese Grundkomponenten jederzeit und überall verwenden, ohne sie manuell einführen zu müssen.

Dritter Zug: Der Frässchlüssel, der das Geld von unten wegnimmt

Szenenwiederherstellung:
Die folgende Szene hat vielen Programmierern wirklich das Herz gebrochen. . Erstens: Standardmäßig verwendet jeder 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, auf Änderungen in $route zu warten, 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){

  }
}

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

Bewegungsanalyse:

Wie können wir das also tun? Einen solchen 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 erfordert, dass jede Komponente nur ein Stammelement haben kann Bei mehreren Stammelementen meldet Vue Ihnen 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 beheben? Sie müssen 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 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>
  )
}

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

Wichtiger Punkt: Dieser Zug ist extrem mächtig, bitte seien Sie dabei sicher beherrschen
Wenn wir Komponenten schreiben, ist die Kommunikation zwischen übergeordneten und untergeordneten Komponenten sehr wichtig. Normalerweise müssen wir 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>

hat die folgenden Optimierungspunkte:

1 Für jede von der übergeordneten Komponente an die untergeordnete Komponente übergebene Requisite müssen wir sie explizit in den Props deklarieren Untergeordnete Anweisung kann verwendet werden. Auf diese Weise müssen unsere untergeordneten Komponenten jedes Mal viele Requisiten deklarieren, aber für DOM-native Eigenschaften wie Placeholer können wir sie tatsächlich direkt vom übergeordneten Element an das untergeordnete Element übergeben, ohne sie zu deklarieren. Die Methode lautet wie folgt:

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

$attrs enthält Eigenschaftsbindungen (außer Klasse und Stil), die im übergeordneten Bereich nicht als Requisiten erkannt (und abgerufen) werden. Wenn eine Komponente keine Requisiten deklariert, sind alle übergeordneten Bereichsbindungen hier enthalten, und innere Komponenten können über v-bind="$attrs" übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

2. Beachten Sie, dass das @focus=$emit('focus', $event)" der untergeordneten Komponente das Ereignis lediglich an die übergeordnete Komponente zurückgibt. Es ist nicht erforderlich, dass ich es explizit deklariere :

<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，这些默认行为将会被去掉, 以上两点的优化才能成功。

---

结尾

掌握了以上五招，你就能在Vue.js的海洋中自由驰骋了，去吧少年。
陆续可能还会更新一些别的招数，敬请期待。

相关推荐：

Vue.js之CLI框架安装步骤

Vue.js如何实现真分页

Vue.js自定义事件如何进行表单输入组件

Das obige ist der detaillierte Inhalt vonBest Practices für Vue.js (fünf Tipps, um Sie zum Vue.js-Meister zu machen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!