Vue コンポーネントで再レンダリングする方法について簡単に説明します。 3つの共有方法-Vue.js-php.cn

Vue コンポーネントで再レンダリングする方法について簡単に説明します。 3つの共有方法

青灯夜游

リリース： 2021-11-04 19:13:18

転載

16772 人が閲覧しました

vue コンポーネントで再レンダリングするにはどうすればよいですか?次の記事では、Vue コンポーネントを再レンダリングするいくつかの方法を要約して共有します。

Vue コンポーネントで再レンダリングする方法について簡単に説明します。 3つの共有方法

最近、現在のコンポーネントを再レンダリングするという要件に遭遇しました。これは簡単に行うことができ、親コンポーネントに再レンダリングを通知するだけです。

以下に、私が知っている vue コンポーネントを再レンダリングするいくつかの方法をまとめます。 [関連する推奨事項:「vue.js チュートリアル」]

Change key

これが最も推奨されます。

Vue は仮想 Dom アルゴリズムを使用して要素の変更を判断するため、変更の核心は古い要素と新しい要素のキー値が変更されたかどうかを判断することです。キーが変更されると要素は再レンダリングされますが、キーが変更されない場合は再レンダリングされません。

したがって、コンポーネントを再レンダリングしたい場合は、コンポーネントに key 属性を追加し、再レンダリングが必要なときにキーの値を変更します。

コンポーネントは再レンダリングされ、対応するライフサイクル関数、計算されたプロパティ、監視などが実行されます。

<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 など)、計算されたプロパティ、監視などが実行されます。これは再レンダリングに相当します。

vm.$forceUpdate()

このメソッドはあまり使用されません。ビューを強制的に更新するためのものです。

しかし、Vue は双方向バインドされています。データが変更されると、ビューはリアルタイムで更新されます。この方法はどのような状況で使用されるのでしょうか?

たとえば、vue は次の配列メソッドのビューのみを更新します:

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

つまり、たとえば、配列に値を再代入するときは、次のようになります。 vue ビューは更新されません。その後、このメソッドを使用してビューを強制的に更新できます。

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

ログイン後にコピー