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

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

青灯夜游

풀어 주다： 2021-11-04 19:13:18

앞으로

16758명이 탐색했습니다.

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

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

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

아래에서는 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() // 调用这个方法会刷新视图
    }
  }
}

로그인 후 복사