vue组件如何响应props值变化并重新执行逻辑？
Vue组件在初始加载后只会执行一次。如果接收到的props值发生变化，组件逻辑并不会自动重新执行。
传统方法：watch
可以使用watch来监听单个props值的改变，并在值变化时手动触发特定操作。然而，这种方法对于需要监听多个props的情况会显得冗余，因为需要为每个props编写一个watch函数。
更优雅的方案
立即学习“前端免费学习笔记（深入）”；
1. 监听props数组:
创建一个计算属性computed来监听一个包含所有相关props值的数组。当数组中任意值发生变化时，计算属性会重新计算，从而触发watch函数：
computed: {
propArray() {
return [this.prop1, this.prop2, this.prop3];
}
},
watch: {
propArray() {
// 执行更新逻辑
}
}
2. 使用动态计算属性:
如果所有需要监听的props都需要相同的处理逻辑，可以使用一个动态计算属性，该属性包含所有props值组成的数组：
computed: {
allProps() {
return Object.values(this.$props);
}
},
watch: {
allProps() {
// 执行更新逻辑
}
}
这些方法提供了一种更简洁的方式来监听props的变化并触发组件逻辑，避免了使用多个watch函数带来的冗余代码。 选择哪种方法取决于具体场景和props的数量以及它们之间的关联性。 如果props之间逻辑独立，则使用多个watch函数可能更清晰；如果props之间逻辑相关，则使用计算属性和单个watch函数更有效率。
