Vue 구성 요소에서 다시 렌더링하는 방법에 대한 간략한 설명은 무엇입니까? 공유하는 3가지 방법

vue 구성 요소에서 어떻게 다시 렌더링하나요? 다음 글은 Vue 컴포넌트를 다시 렌더링하는 여러 가지 방법을 요약하고 공유할 것입니다. 모든 사람에게 도움이 되기를 바랍니다.

최근에 현재 구성 요소를 다시 렌더링해야 할 필요성이 발생했습니다. 이는 매우 쉽습니다. 상위 구성 요소에 다시 렌더링하도록 알리기만 하면 됩니다.

아래에서는 Vue 구성 요소를 다시 렌더링하는 방법에 대해 제가 아는 여러 가지 방법을 요약하겠습니다. [관련 추천 : "vue.js Tutorial"]

Change key

가장 추천드리는 내용입니다.

vue는 가상 Dom 알고리즘을 사용하여 요소의 변경을 확인하기 때문에 변경의 핵심은 이전 요소와 새 요소의 키 값이 변경되었는지 확인하는 것입니다. 키가 변경되면 요소가 다시 렌더링됩니다. 키가 변경되지 않으면 다시 렌더링되지 않습니다.

따라서 구성 요소를 다시 렌더링하려면 구성 요소에 key 속성을 ​​추가한 다음 다시 렌더링해야 할 때 키 값을 변경하세요. 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()

구성 요소가 다시 렌더링되고 해당 수명 주기 기능, 계산된 속성, 시계 등이 실행됩니다.

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

v-if

우리가 사용하는 명령어 중에서 v-if도 비교적 일반적입니다.

false로 설정하면 현재 조건부 블록에 포함된 요소가 삭제됩니다. 구성 요소가 포함된 경우 구성 요소의 해당 수명 주기 기능(beforeDestroy) > , 파괴 등)이 실행됩니다.

true로 설정하면 현재 조건부 블록의 요소가 재구성됩니다. 구성 요소가 포함된 경우 구성 요소의 해당 수명 주기 기능(생성) , mounted 등), 계산된 속성, watch 등이 실행되며 이는 다시 렌더링하는 것과 같습니다. 🎜

🎜vm.$forceUpdate()🎜🎜🎜이 방법은 많이 사용되지 않으며 뷰를 강제로 업데이트하는 방법입니다. 🎜🎜하지만 Vue는 데이터가 변경되면 실시간으로 뷰가 새로 고쳐집니다. 어떤 상황에서 이 방법이 사용되나요? 🎜🎜예를 들어, vue는 다음과 같은 배열 메서드에 대한 보기만 새로 고칩니다. 🎜

• push()🎜
• pop()🎜
• shift()🎜
• unshift()🎜
• splice()🎜
• sort()🎜<li> <code>reverse()🎜🎜🎜예를 들어 배열의 값을 다시 할당하면 vue는 뷰를 새로 고치지 않습니다. 그런 다음 이 방법을 사용하여 보기를 강제로 새로 고칠 수 있습니다. 🎜rrreee🎜🎜vue 인스턴스가 이 메서드를 실행하면 해당 인스턴스에 해당하는 생명주기 함수, 계산된 속성, 감시 등은 뷰를 새로 고치기만 합니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 Vue 구성 요소에서 다시 렌더링하는 방법에 대한 간략한 설명은 무엇입니까? 공유하는 3가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!