7 Punkte, die beim Einsatz der Vue-Technologie leicht übersehen werden

Dieses Mal bringe ich Ihnen 7 Punkte, die bei der Verwendung der Vue-Technologie leicht übersehen werden. Was sind die Vorsichtsmaßnahmen, wenn Sie die Vue-Technologie verwenden? Hier sind praktische Fälle.

Vorwort

Dieser Artikel ist eine öffentliche Weitergabe des Vue-Quellcode-Beitrags Dinge, von denen es sich zu lernen lohnt, obwohl ich das für einige Inhalte auch bei der Arbeit mache, übersetze ich hier immer noch das Master-PT, in der Hoffnung, meinen Freunden etwas Hilfe zu bringen.

1. Nutzen Sie die unmittelbare Eigenschaft der Uhr

Das habe ich auch im Projekt geschrieben. Wenn zum Beispiel eine Anfrage einmal ausgeführt werden muss, bevor sie initialisiert wird, und dann ihre Änderungen überwacht werden müssen, schreiben viele Leute das so:

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

Wir können das Obige wie folgt schreiben:

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

2. Es lohnt sich, von der Komponentenregistrierung zu lernen

Im Allgemeinen sind unsere Komponenten wie folgt geschrieben:

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>

Es gibt im Allgemeinen drei Schritte,

Der erste Schritt ist die Einführung,

der zweite Schritt ist die Registrierung,

der dritte Schritt ist die formelle Verwendung,

Dies ist auch die gebräuchlichste und gebräuchlichste Schreibweise. Diese Art der Schreibweise ist jedoch klassisch. Es gibt viele Komponenten, die mehrmals eingeführt und registriert werden müssen, was sehr ärgerlich ist.

Wir können Webpack verwenden, um <a href="http://www.php.cn/wiki/136.html" target="_blank">require<code> <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>.context() .context( ) zu verwenden. -Methode zum Erstellen Ihres eigenen (Modul-)Kontexts zum Implementieren automatischer dynamischer Anforderungskomponenten.

Die Idee ist: Verwenden Sie in main.js im Ordner src das Webpack, um alle erforderlichen Grundkomponenten dynamisch zu packen.

Der Code lautet wie folgt:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
// Require in a base component context
const requireComponent = require.context(
 ‘./components', false, /base-[\w-]+\.vue$/
)
requireComponent.keys().forEach(fileName => {
 // Get component config
 const componentConfig = requireComponent(fileName)
 // Get PascalCase name of component
 const componentName = upperFirst(
  camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
 )
 // Register component globally
 Vue.component(componentName, componentConfig.default || componentConfig)
})

Auf diese Weise benötigen wir nur den dritten Schritt, um Komponenten einzuführen:

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

3 Einführung von Modulen in Vuex

Für Vuex geben wir den Store wie folgt aus:

import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...
export default new Vuex.Store({
 modules: {
  auth,
  posts,
  comments,
  // ...
 }
})

Sie müssen viele Module einführen und sie dann in Vuex registrieren. Store~~

Streamlined Die Methode ähnelt der oben genannten. Sie verwendet auch require.context(), um die Datei zu lesen . Der Code lautet wie folgt:

import camelCase from 'lodash/camelCase'
const requireModule = require.context('.', false, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
 // Don't register this file as a Vuex module
 if (fileName === './index.js') return
 const moduleName = camelCase(
  fileName.replace(/(\.\/|\.js)/g, '')
 )
 modules[moduleName] = {
        namespaced: true,
        ...requireModule(fileName),
       }
})
export default modules

Auf diese Weise benötigen wir nur den folgenden Code:

import modules from './modules'
export default new Vuex.Store({
 modules
})

4. Verzögertes Laden von Routen

In Bezug auf die Einführung von Vue habe ich Ich habe es auch bereits in den technischen Punkten und der Zusammenfassung der Vue-Projektrekonstruktion erwähnt. Sie können Komponenten mithilfe der Methoden require oder import() dynamisch laden.

{
 path: '/admin',
 name: 'admin-dashboard',
 component:require('@views/admin').default
}

oder

{
 path: '/admin',
 name: 'admin-dashboard',
 component:() => import('@views/admin')
}

lädt Routen.

5. Aktualisieren Sie die Router-Schlüsselkomponente

Die folgende Szene bricht vielen Programmierern wirklich das Herz ... Lassen Sie mich zunächst zustimmen -router wird zur Implementierung der Routing-Steuerung verwendet. Angenommen, wir schreiben eine Blog-Website und die Anforderung besteht darin, von /post-haorooms/a nach /post-haorooms/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 Methode, die Sie in der erstelltenFunktion geschrieben haben, ü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 „Lazy if you can“ 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) {
  // ...
 }
}

Lösung: Fügen Sie einen eindeutigen Schlüssel zur Router-Ansicht hinzu, sodass, selbst wenn es sich um eine öffentliche Komponente handelt, Solange sich die URL ändert, wird sie neu erstellt. Erstellen Sie diese Komponente.

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

Hinweis: Nach meiner persönlichen Erfahrung wird dies im Allgemeinen in Unterrouten verwendet, um eine große Anzahl von Neuzeichnungen nicht zu vermeiden. Vorausgesetzt, dass dieses Attribut zum Stammverzeichnis von app.vue hinzugefügt wird Jedes Mal, wenn Sie klicken, um die Adresse zu ändern, wird sie neu gezeichnet, der Gewinn ist es trotzdem nicht wert!

6. Das einzige Komponentenstammelement

Das Szenario ist wie folgt:

(Stattdessen wird ein Wert ausgegeben einer Fehlerinstanz)
Fehler beim Kompilieren der Vorlage:

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

模板中p只能有一个，不能如上面那么平行2个p。

例如如下代码：

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

会报错！

我们可以用render函数来渲染

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

七、组件包装、事件属性穿透问题

当我们写组件的时候，通常我们都需要从父组件传递一系列的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>

这样写很不精简，很多属性和事件都是手动定义的，我们可以如下写：

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

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

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

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

推荐阅读：

怎样对webpack模块进行热替换

Angular入口组件与声明式组件案例对比

Das obige ist der detaillierte Inhalt von7 Punkte, die beim Einsatz der Vue-Technologie leicht übersehen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!