Utilisation immédiate du projet watch in vue

Cette fois je vais vous présenter l'utilisation immédiate de watch dans le projet Vue Quelles sont les précautions pour l'utilisation immédiate de watch dans le projet Vue Voici un cas pratique, jetons un oeil.

J'ai aussi écrit ceci 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 créer notre propre contexte (de module) en utilisant la méthode

pour 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 :

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

La méthode simplifiée est similaire à celle ci-dessus et utilise également require.context() pour lire le fichier. Le code est le suivant :

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

4. Chargement différé des itinéraires

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

Ce point, concernant l'introduction de vue, je l'ai également mentionné auparavant dans les points techniques et le résumé de la reconstruction du projet vue. Cependant, 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. Actualisez le composant clé du routeur

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

La scène suivante brise vraiment le cœur de nombreux programmeurs... Permettez-moi d'abord d'acquiescer à 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 :

- Le modèle de composant doit contient exactement un élément racine
Si vous utilisez v-if sur plusieurs éléments, utilisez v-else-if

pour les chaîner à la place.

Il ne peut y avoir qu'un seul p dans le gabarit, pas comme ci-dessus Alors 2 p sont parallèles.

Par exemple, le code suivant :

signalera une erreur !

Nous pouvons utiliser la fonction de rendu pour rendre

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

7. Problèmes d'emballage des composants et de pénétration des attributs d'événement

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中文网其它相关文章！

推荐阅读：

脚手架与热刷新、热加载

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

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!