Zusammenfassung der grundlegenden Wissenspunkte von Vue.js

Dieses Mal werde ich Ihnen eine Zusammenfassung der grundlegenden Wissenspunkte von Vue.js geben. Was sind die Vorsichtsmaßnahmen, wenn Sie das grundlegende Wissen von Vue.js verwenden? .

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

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 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 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 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 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: Der Router-Schlüssel, der einen großen Schlag einsteckt

Szenenwiederherstellung:

Die folgende Szene hat vielen Programmierern wirklich das Herz gebrochen. .Zunächst 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){
 }
}

Der Fehler ist behoben, aber ist es 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 ist:

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? ist für router-view Fügen Sie einen eindeutigen Schlüssel hinzu, damit 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 Root-Element haben kann. Wenn Sie mehrere Stammelemente 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 beheben, aber zu diesem Zeitpunkt haben wir 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 unendlich mächtig. Bitte beherrschen Sie unbedingt

Wenn wir Komponenten schreiben, müssen wir normalerweise eine Reihe von Requisiten von der übergeordneten Komponente an die untergeordnete Komponente übergeben, und gleichzeitig überwacht die übergeordnete Komponente eine Reihe ausgegebener Ereignisse aus der untergeordneten Komponente. 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.每一个从父组件传到子组件的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中文网其它相关文章！

推荐阅读：

JS动态加载时重复绑定如何处理

JSON格式的数据如何提交到服务端

微信小程序里wx:for和wx:for-item有什么区别

Das obige ist der detaillierte Inhalt vonZusammenfassung der grundlegenden Wissenspunkte von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!