vue组件中重新渲染的3种方式

vue组件中重新渲染的3种方式

改变key

• 这个是最推荐的。因为vue是通过虚拟Dom算法来判断元素的变化，是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的，则重新渲染该元素，如果key没变，则不会重新渲染。

• 所以如果你想让你的组件重新渲染，你给组件加上key属性，然后在需要重新渲染的时候，改变key的值就行。

• <template>
    <div class="home">
      <el-button @click="freshKey">test</el-button>
      <aComp :key="key"></aComp>
    </div>
  </template>
   
  <script>
  import aComp from '@/components/aComp'
  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()

• 这个方法用的不多，是强制更新视图。