Vue.js praktische Projektfreigabe

Dieses Mal werde ich ein praktisches Projekt von Vue.js vorstellen. Was sind die Vorsichtsmaßnahmen für die praktische Verwendung von Vue.js?

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

Wir erhalten es, wenn die Komponente erstellt wird. Es ist sehr Es ist üblich, die Liste einmal aufzulisten, gleichzeitig 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 dies der Fall sein wird wird sofort beim Erstellen der Komponente ausgeführt.

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 Grundlagen geschrieben UI-Komponenten, und jedes Mal, wenn wir diese Komponenten verwenden müssen, müssen wir die Komponenten zuerst importieren und dann 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 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)
})

Zuletzt importieren wir „components/global.js“ in main.js, und dann können wir diese Basiskomponenten jederzeit und überall verwenden, ohne sie manuell einführen zu müssen.

Der dritte Trick: Der Router-Schlüssel, der das Geld von unten wegnimmt

Szenenwiederherstellung:

Die folgende Szene hat vielen Programmierern wirklich das Herz gebrochen ... Lasst uns Verwenden Sie es zuerst standardmäßig. Es ist der Vue-Router, der die Routing-Steuerung implementiert.

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 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 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) {
  // ...
 }
}

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>

Der vierte Trick: die allmächtige Renderfunktion

Szenenwiederherstellung:

vue benötigt jede Komponente, die es nur geben kann ein Root-Element. Wenn Sie mehrere Root-Elemente haben, gibt vue einen Fehler aus:

<template>
 <li
  v-for="route in routes"
  :key="route.name"
 >
  <router-link :to="route">
   {{ route.title }}
  </router-link>
 </li>
</template>

FEHLER – Die Komponentenvorlage sollte genau ein Root-Element enthalten.
Wenn Sie v-if für mehrere Elemente verwenden, verwenden Sie v-else-if
um sie stattdessen zu verketten.

Bewegungsanalyse:

Gibt es eine Möglichkeit, das Problem zu lösen? Die Antwort lautet „Ja“, aber zu diesem Zeitpunkt müssen wir sie verwenden die render()-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>
 )
}

Der fünfte Trick: High-Level-Komponenten, die ohne Tricks gewinnen können

Wichtige Punkte: Dies Eine Bewegung ist extrem kraftvoll, man muss sie unbedingt beherrschen

当我们写组件的时候，通常我们都需要从父组件传递一系列的props到子组件，同时父组件监听子组件emit过来的一系列事件。举例子：

//父组件
<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>

有下面几个优化点：

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项目步骤详解

怎样使用Node.js内Koa实现JWT用户认证

Das obige ist der detaillierte Inhalt vonVue.js praktische Projektfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!