在 Vue 中，一个子组件被渲染的情况可以归纳为以下几种主要情况：
1. 初次加载
当父组件首次被挂载时，所有子组件也会被渲染。这是因为在 Vue 的生命周期中，父组件的挂载会触发子组件的挂载。
2. 父组件重新渲染
当父组件的状态或属性发生变化时，父组件会重新渲染，这可能会导致子组件也重新渲染。具体情况如下：
2.1 父组件的状态变化
如果父组件的响应式数据发生变化，并且这些数据被传递给子组件，子组件也会重新渲染。
<template>
<div>
<button @click="increment">Increment</button>
<ChildComponent :count="count" />
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
};
</script>
在这个例子中，当 count 变化时，ChildComponent 会重新渲染。
2.2 父组件的属性变化
如果父组件的某个属性变化，并且这个属性影响了子组件的渲染，子组件也会重新渲染。
<template>
<div>
<ChildComponent :visible="isVisible" />
<button @click="toggleVisibility">Toggle Visibility</button>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
const isVisible = ref(true);
const toggleVisibility = () => {
isVisible.value = !isVisible.value;
};
return { isVisible, toggleVisibility };
}
};
</script>
在这个例子中，当 isVisible 变化时，ChildComponent 会重新渲染。
3. 子组件的状态变化
子组件自身的响应式数据发生变化时，子组件会重新渲染。
<template>
<div>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
};
</script>
在这个例子中，当 count 变化时，子组件会重新渲染。
4. 插槽内容变化
如果父组件传递给子组件的插槽内容发生变化，子组件也会重新渲染。
<template>
<div>
<ChildComponent>
<template #default>
<p>{{ message }}</p>
</template>
</ChildComponent>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
const message = ref('Hello');
const changeMessage = () => {
message.value = 'Hello, World!';
};
return { message, changeMessage };
}
};
</script>
在这个例子中，当 message 变化时，ChildComponent 会重新渲染。
5. 条件渲染
如果子组件是通过条件渲染 (v-if 或 v-show) 的方式渲染的，当条件变化时，子组件会重新渲染。
<template>
<div>
<button @click="toggle">Toggle</button>
<ChildComponent v-if="isVisible" />
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
const isVisible = ref(true);
const toggle = () => {
isVisible.value = !isVisible.value;
};
return { isVisible, toggle };
}
};
</script>
在这个例子中，当 isVisible 变化时，ChildComponent 会重新渲染。
6. 路由变化
如果使用 Vue Router，当路由变化时，路由组件及其子组件会重新渲染。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在这个例子中，当路由从 / 切换到 /about 时，Home 组件会被卸载，About 组件会被挂载并渲染。
7. 强制更新
如果使用了 $forceUpdate 方法，当前组件及其所有子组件会重新渲染。
<template>
<div>
<button @click="forceUpdate">Force Update</button>
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
forceUpdate() {
this.$forceUpdate();
}
}
};
</script>
在这个例子中，当调用 forceUpdate 方法时，ChildComponent 会重新渲染。
总结
子组件被渲染的情况主要包括父组件的初次加载、父组件的状态或属性变化、子组件自身的状态变化、插槽内容变化、条件渲染、路由变化以及强制更新。这些情况涵盖了大多数子组件重新渲染的情形。
