Sofortige Nutzung der Uhr im Vue-Projekt

Dieses Mal werde ich Ihnen die unmittelbare Verwendung von watch im Vue-Projekt vorstellen. Was sind die Vorsichtsmaßnahmen für die sofortige Verwendung von watch im Vue-Projekt?

Das habe ich auch im Projekt geschrieben. Wenn es beispielsweise eine Anforderung gibt, die einmal ausgeführt werden muss, bevor sie initialisiert wird, und dann ihre Änderungen überwacht werden muss, schreiben viele Leute sie so:

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

Wir können die obige Vorgehensweise genau wie folgt schreiben:

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

2. Die Registrierung von Komponenten lohnt sich

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 offizielle Nutzung,

Das ist auch die gebräuchlichste und gebräuchlichste Schreibweise. Diese Schreibmethode 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 unseren eigenen (Modul-)Kontext zu erstellen, indem wir die Methode require.context() verwenden, um automatische dynamische Anforderungskomponenten zu implementieren.

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 Vuex-Modulen

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 diese dann im Vuex.Store registrieren ~~

Optimiert 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 brauchen wir nur der folgende Code:

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

Viertens: Verzögertes Laden von Routen

Bezüglich der Einführung von Vue habe ich es bereits in den technischen Punkten erwähnt und Zusammenfassung der Vue-Projektrekonstruktion, die über die Methode require oder import() erfolgen kann, um Komponenten dynamisch zu 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. Aktualisierung der Schlüsselkomponenten des Routers

Die folgende Szene bricht vielen Programmierern wirklich das Herz ... Lassen Sie uns zunächst nachgeben. Vue-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 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 „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:

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

Es darf nur ein p enthalten sein die Vorlage, nicht wie oben Dann sind 2 p parallel.

Zum Beispiel wird der folgende Code:

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

einen Fehler melden!

Wir können die Renderfunktion zum Rendern verwenden

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

7. Komponentenverpackungs- und Ereignisattributpenetrationsprobleme

当我们写组件的时候，通常我们都需要从父组件传递一系列的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中文网其它相关文章！

推荐阅读：

脚手架与热刷新、热加载

Vue怎样进行局部作用域 & 模块化

Das obige ist der detaillierte Inhalt vonSofortige Nutzung der Uhr im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!