Une brève discussion sur la façon de restituer les composants vue ? 3 façons de partager

Comment restituer le composant vue ? L'article suivant résumera et partagera plusieurs façons de restituer les composants Vue. J'espère qu'il sera utile à tout le monde !

J'ai récemment rencontré le besoin de restituer le composant actuel. C'est facile à faire, il suffit d'informer le composant parent de procéder à un nouveau rendu.

Ci-dessous, je résumerai les différentes manières que je connais pour restituer les composants de vue. [Recommandation associée : "tutoriel vue.js"]

Changer de clé

C'est le plus recommandé.

Étant donné que vue utilise l'algorithme Dom virtuel pour déterminer le changement d'éléments, l'essentiel du changement est de déterminer si les valeurs clés des anciens et des nouveaux éléments ont changé. Si votre clé change, l'élément sera restitué. Si la clé n'a pas changé, il ne sera pas restitué.

Donc, si vous souhaitez que votre composant soit restitué, vous ajoutez l'attribut key au composant, puis modifiez la valeur de la clé lorsqu'elle doit être restituée. key属性，然后在需要重新渲染的时候，改变key的值就行。

组件会重新渲染，相应的生命周期函数，计算属性，watch等都会执行。

<template>
  <div class="home">
    <el-button @click="freshKey">test</el-button>
    <aComp :key="key"></aComp>
  </div>
</template>

<script>
import aComp from &#39;@/components/aComp&#39;
export default {
  components: {
    aComp
  },
  data () {
    return {
      key: 0
    }
  },
  methods: {
    freshKey () {
      this.key++
    }
  }
}
</script>

v-if

我们用的指令中，v-if也是比较多的。

当你设置为false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。

当你设置为true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。

vm.$forceUpdate()

这个方法用的不多，是强制更新视图。

但是vue是双向绑定的，数据变化，视图也会实时刷新，什么情况下会用到这个方法呢？

比如vue只针对数组的这些方法会刷新视图：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Le composant sera restitué et les fonctions de cycle de vie correspondantes, les propriétés calculées, les montres, etc. seront exécutées.

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

v-if

Parmi les instructions que nous utilisons, v-if est également relativement courant.

Lorsque vous le définissez sur false, les éléments contenus dans le bloc conditionnel actuel seront détruits. S'il contient un composant, la fonction de cycle de vie correspondante du composant (beforeDestroy). > , destroyed, etc.) sera exécuté.

Lorsque vous le définissez sur true, les éléments du bloc conditionnel actuel seront reconstruits s'il contient un composant, la fonction de cycle de vie correspondante du composant (créé. , monté, etc.), les propriétés calculées, la surveillance, etc. seront exécutées, ce qui équivaut à un nouveau rendu. 🎜

🎜vm.$forceUpdate()🎜🎜🎜Cette méthode n'est pas beaucoup utilisée, elle consiste à forcer la mise à jour de la vue. 🎜🎜Mais Vue est bidirectionnelle. Lorsque les données changent, la vue sera actualisée en temps réel. Dans quelles circonstances cette méthode sera-t-elle utilisée ? 🎜🎜Par exemple, vue actualise uniquement la vue pour ces méthodes de tableaux : 🎜

• push()🎜
• pop()🎜
• shift()🎜
• unshift()🎜
• splice()🎜
• sort()🎜<li> <code>reverse()🎜🎜🎜Ainsi, par exemple, lorsque vous réattribuez une valeur dans le tableau, vue ne rafraîchira pas la vue. Vous pouvez ensuite utiliser cette méthode pour forcer l'actualisation de la vue. 🎜rrreee🎜🎜Lorsque l'instance vue exécute cette méthode, elle rafraîchit uniquement la vue. Les fonctions de cycle de vie, propriétés calculées, montres, etc. correspondant à l'instance ne seront pas réexécutées. 🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!