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의 반응 데이터이지만 메시지 변경 버튼을 클릭할 때마다 전체 구성 요소가 다시 렌더링됩니다. 성능에 영향을 미칠 수 있습니다. 이를 방지하는 방법은 다음과 같습니다.

$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 중국어 웹사이트의 기타 관련 기사를 참조하세요!