Vue が値を変更し、トリガーを禁止する

Vue.js では、双方向のデータ バインディングを通じて、コンポーネントのデータが変更されるとコンポーネントが再レンダリングされますが、一部のデータ変更によって再レンダリングがトリガーされることを望まない場合があります。 Vue の変更を禁止する方法 値によって再レンダリングがトリガーされます。

Vue のデータは応答性があります

Vue フレームワークのデータは応答性があります。これは、データが変更されると、Vue がビュー内の新しいデータを再レンダリングすることを意味します。この機能により、ページ開発がより簡単かつスムーズになります。

たとえば、データが変更されると、次の Vue コンポーネントが自動的に再レン​​ダリングされます:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
    },
  },
};
</script>

上記のコードでは、メッセージは Vue の応答データですが、メッセージの変更ボタンが表示されるたびに、 clicked コンポーネント全体が再レンダリングされるため、パフォーマンスに影響を与える可能性があります。これを回避する方法は次のとおりです。

$forceUpdate メソッドを使用する

Vue には、コンポーネントを強制的に再レン​​ダリングできるコンポーネント メソッド $forceUpdate() が用意されています。ただし、$forceUpdate() メソッドは再レンダリングを深くトリガーしません。これは、データの一部を変更した場合、Vue はそのデータを含むコンポーネントとサブコンポーネントのみを再レンダリングすることを意味します。

コンポーネントのレンダリング サイクル中に $forceUpdate() を呼び出すと、データが変更されていない場合でも、コンポーネントはコンポーネント全体を再レンダリングします。したがって、データが変更されたときに $forceUpdate() メソッドを呼び出すことで、コンポーネントがレンダリングされないようにすることができます。例:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
      this.$forceUpdate();
    },
  },
};
</script>

上の例では、データ メッセージの変更中に $forceUpdate() メソッドを呼び出しました。このように、Vue は他のコンポーネントのパフォーマンスに影響を与えることなく、コンポーネントのみを再レンダリングします。

vue-set メソッドの使用

Vue には、新しい応答プロパティをオブジェクトに追加または更新できる vue-set メソッドが用意されています。このメソッドは通常、新しい dom 要素を追加したり、Vue サイクルで表示する必要のないいくつかの要素を制御したりするために使用されます。 vue-set を使用すると、forceUpdate の繰り返し呼び出しによって引き起こされるパフォーマンスの問題を回避できます。

<template>
  <div>
    <p>The message start with "{{ message.charAt(0) }}"</p>
    <button @click="prependChar">Click me to add new char</button>
  </div>
</template>

<script>
import {set} from 'vue'

export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    prependChar() {
      const newChar = String.fromCharCode(
        this.message.charCodeAt(0) + 1
      );
      set(this.message, 0, newChar);
    },
  },
};
</script>

上記のコードでは、ボタンをクリックすると、メッセージの先頭に新しい文字が追加され、set メソッドが使用されます。新しいリアクティブ プロパティを追加するように Vue に通知して、forceUpdate メソッドのパフォーマンスの問題を回避できるようにします。

最終考察

Vue では、レスポンシブ データを変更するとコンポーネントの再レンダリングがトリガーされ、開発がよりスムーズになります。ただし、ページのパフォーマンスを向上させるために、再レンダリングの回数を減らす必要がある場合があります。この記事では、$forceUpdate メソッドと vue-set メソッドを呼び出してコンポーネントのレンダリングを防ぐ方法を紹介しました。同時に、パフォーマンスの問題とコードの効率に注意を払い、値変更トリガーを禁止する機能を実装する適切な方法を選択する必要があります。

以上がVue が値を変更し、トリガーを禁止するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。