Vue中关于重新渲染组件的方法及总结

关于Vue中重新渲染组件的方法及总结，我可以给您提供以下完整攻略。

方法总结

Vue中重新渲染组件的方法总结如下：

1. 父组件强制更新子组件：可以通过 $forceUpdate 方法来强制更新子组件，这样会导致子组件的所有内部状态被更新并重新渲染。

2. 直接修改 props 数据：如果父组件中传递给子组件的 props 数据变化了，子组件就会自动重新渲染。

3. 监听 props 数据变化：Vue提供了 watch 函数，可以监听一个数据的变化，并且在数据变化时执行一些操作，所以可以利用 watch 来监听父组件中传递给子组件的 props 数据变化，并在数据变化时重新渲染子组件。

4. 利用 key：给组件添加唯一的 key，可以让 Vue 知道当前组件是否需要被更新，如果 key 值改变，则 Vue 会强制组件重新渲染。

示例说明

为了更好地理解这些方法，接下来给出两个示例说明：

示例一

父组件代码如下：

<template>
  <div>
    <button @click="changeContent">改变内容</button>
    <child :content="content"></child>
  </div>
</template>
<script>
import Child from 'Child.vue';
export default {
  components: { Child },
  data() {
    return {
      content: 'Hello World!'
    };
  },
  methods: {
    changeContent() {
      this.content += '!';
    }
  }
};
</script>

子组件代码如下：

<template>
  <div>
    <h1>{{content}}</h1>
  </div>
</template>
<script>
export default {
  props: {
    content: String
  }
};
</script>

这个示例中，父组件通过传递 data 中的content 值给子组件 Child 来渲染，点击按钮后更改 content ，但这时候子组件不会发生变化，因为这不是 props 的一个变化，而是 data 中的一个变化。

接下来可以通过强制更新子组件来重新渲染：

<template>
  <div>
    <button @click="changeContent">改变内容</button>
    <child :content="content"></child>
  </div>
</template>
<script>
import Child from 'Child.vue';
export default {
  components: { Child },
  data() {
    return {
      content: 'Hello World!'
    };
  },
  methods: {
    changeContent() {
      this.content += '!';
      this.$forceUpdate();
    }
  }
};
</script>

这里通过 $forceUpdate() 方法来强制更新子组件，这样就能够重新渲染子组件。

示例二

父组件代码如下：

<template>
  <div>
    <button @click="changeContent">改变内容</button>
    <child :content="content" :key="key"></child>
  </div>
</template>
<script>
import Child from 'Child.vue';
export default {
  components: { Child },
  data() {
    return {
      content: 'Hello World!',
      key: 1
    };
  },
  methods: {
    changeContent() {
      this.content += '!';
      this.key += 1;
    }
  }
};
</script>

子组件代码与上述示例一代码相同。

这个示例中，在父组件中通过给子组件添加 :key="key" 来判断必须重新渲染的情况。在点击按钮后，父组件中的 key 值进行了修改，所以 Vue 会强制子组件重新渲染，这种方法便不用写 $forceUpdate() 代码，更加简洁方便。

希望这些说明对您有所帮助。