7 points qui sont facilement négligés lors de l'utilisation de la technologie Vue

Cette fois, je vais vous apporter 7 points qui sont facilement négligés lors de l'utilisation de la technologie vue. Quelles sont les précautions lors de l'utilisation de la technologie vue. Voici des cas pratiques, jetons un coup d'œil.

Avant-propos

Cet article est un partage de la valeur de la contribution du code source de vue par Chris Fritz dans un lieu public. des choses qui valent la peine d'être apprises, même si je fais également cela au travail pour certains contenus, je traduis toujours le ppt du master ici, dans l'espoir d'apporter de l'aide à mes amis.

1. Faire bon usage de l'attribut immédiat de watch

C'est ce que j'ai également écrit dans le projet. Par exemple, s'il y a une requête qui doit être exécutée une fois avant d'être initialisée, puis surveiller ses modifications, de nombreuses personnes l'écrivent comme ceci :

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

Nous pouvons écrire ce qui précède comme suit :

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

2. L'enregistrement des composants mérite d'être appris auprès du département, La première étape est l'introduction,

La deuxième étape est l'enregistrement,

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>

🎜>

La troisième étape est l'utilisation officielle,

C'est aussi la méthode d'écriture la plus courante et la plus courante. Cependant, ce type de méthode d'écriture est classique. Il existe de nombreux composants qui doivent être introduits et enregistrés plusieurs fois, ce qui est très ennuyeux.

Nous pouvons utiliser webpack pour utiliser <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>

.context( ) pour créer votre propre contexte (module) afin d'implémenter des composants dynamiques automatiques.

L'idée est la suivante : dans le main.js sous le dossier src, utilisez webpack pour empaqueter dynamiquement tous les composants de base requis.

Le code est le suivant :

<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>.context()

De cette façon, nous n'avons besoin que de la troisième étape pour introduire le composant :

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

3. Rationaliser vuex Les modules sont introduits

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

Pour vuex, nous sortons le magasin comme suit : Il est nécessaire d'introduire beaucoup de modules, puis enregistrez-les dans Vuex.Store~~

L'approche simplifiée est similaire à celle ci-dessus. Elle utilise également require.context()

pour lire le fichier

.

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

De cette façon, nous n'avons besoin que du code suivant :

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

Chargement différé des itinéraires

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

Ce point, concernant l'introduction de vue, j'ai préalablement reconstitué les points techniques du projet vue Comme mentionné dans le résumé, les composants peuvent être chargés dynamiquement via require ou import(). ou

charge les itinéraires.

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

5. Actualisation des composants clés du routeur

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

La scène suivante brise vraiment le cœur de nombreux programmeurs... Tout d'abord, acquiesçons. Vue-router est utilisé pour implémenter le contrôle de routage. Supposons que nous écrivions un site Web de blog et que l'exigence soit de passer de /post-haorooms/a à /post-haorooms/b. Ensuite, nous avons découvert avec surprise que les données n'étaient pas mises à jour après le saut de page ? ! La raison en est que vue-router a découvert "intelligemment" qu'il s'agissait du même composant, puis il a décidé de réutiliser ce composant, donc la méthode que vous avez écrite dans la fonction créée n'a pas été exécutée du tout. La solution habituelle est de surveiller les changements dans $route pour initialiser les données, comme suit :

Le bug est résolu, mais est-ce trop inélégant d'écrire ainsi à chaque fois ? Adhérant au principe d'être paresseux si vous le pouvez, nous espérons que le code sera écrit comme ceci :

Solution : Ajouter une clé unique à router-view, de sorte que même s'il s'agit d'un composant public , tant que l'URL change, ce sera Ce composant sera recréé.

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

Remarque : D'après mon expérience personnelle, ceci est généralement utilisé dans les sous-routes, afin de ne pas éviter un grand nombre de redessins. En supposant que cet attribut soit ajouté au répertoire racine de app.vue. , puis à chaque fois que vous cliquez pour changer l'adresse, Redessiner vaut toujours la peine !

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
  // ...
 }
}

6. Le seul élément racine du composant

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

Le scénario est le suivant : (Valeur émise à la place d'une instance d'Erreur) Erreur de compilation du modèle :

  - 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入口组件与声明式组件案例对比

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!