Vue组件初始化顺序详解：从困惑到理解
很多vue开发者在使用组件时，对computed、watch、onMounted这些选项的执行顺序感到困惑。我自己也曾经是这样，遇到问题就反复调试，试对了就继续，从来没有深入理解过其中的原理。
今天我们来彻底搞懂Vue组件的初始化顺序，通过实际代码测试和原理分析，让你从此不再迷茫。
一个让人困惑的例子
先来看一个完整的组件代码，我在每个关键位置都加了编号：
<script setup>
import { computed, onMounted, watch } from 'vue';
const props = defineProps({
data: { type: Object, default: () => ({}) }
});
// 代码1：打印父组件传递的属性
console.log('props data');
const computedData = computed(() => {
// 代码2：计算属性回调函数
console.log('computedData');
return props.data;
});
onMounted(() => {
// 代码3：onMounted生命周期钩子函数
console.log('onMounted');
});
watch(() => props.data, () => {
// 代码4：watch监听props数据
console.log('watch props data');
}, { immediate: true });
watch(() => computedData.value, () => {
// 代码5：watch监听计算属性数据
console.log('watch computed Data');
}, { immediate: true });
</script>
<template>
<div>我是子组件</div>
<div>{{ computedData }}</div>
</template>按照直觉，我认为执行顺序应该是：代码1 → 代码2 → 代码4 → 代码5 → 代码3。毕竟代码是从上往下写的，computed定义在watch前面，应该先执行才对。
但实际运行结果让人意外：
props data
watch props data
computedData
watch computed Data
onMounted实际顺序是：代码1 → 代码4 → 代码2 → 代码5 → 代码3。为什么computed在watch后面执行？这完全颠覆了我的认知。
理解执行顺序的原理
通过查阅资料和思考，我明白了其中的原理，主要有两个关键点：
第一，setup函数中的代码是同步执行的
Vue会按照代码顺序同步执行setup函数中的内容：
先执行代码1，打印"props data"
然后遇到代码4对应的watch，由于设置了immediate: true，会立即执行，打印"watch props data"
接着遇到代码5对应的watch，也要立即执行，但执行时需要访问computedData.value
访问computedData.value触发了代码2的执行，打印"computedData"
然后代码5继续执行，打印"watch computed Data"
第二，computed是惰性的
计算属性不会自动执行，只有在被访问时才会计算。在这个例子中，是watch的立即执行触发了computed的计算。
最后，代码3的onMounted在所有同步代码执行完毕后，等dom挂载完成才执行，这与我们的认知是一致的。
调换watch顺序会怎样？
现在我们调换两个watch的定义顺序，看看会发生什么：
<script setup>
import { computed, onMounted, watch } from 'vue';
const props = defineProps({
data: { type: Object, default: () => ({}) }
});
// 代码1：父组件传递给子组件的属性
console.log('props data');
const computedData = computed(() => {
// 代码2：计算属性回调函数
console.log('computedData');
return props.data;
});
onMounted(() => {
// 代码3：onMounted生命周期钩子函数
console.log('onMounted');
});
// 先定义监听computedData的watch
watch(() => computedData.value, () => {
// 代码5：watch监听计算属性数据
console.log('watch computed Data');
}, { immediate: true });
// 后定义监听props.data的watch
watch(() => props.data, () => {
// 代码4：watch监听props数据
console.log('watch props data');
}, { immediate: true });
</script>
<template>
<div>我是子组件</div>
<div>{{ computedData }}</div>
</template>这次的执行顺序是：
props data
computedData
watch computed Data
watch props data
onMounted为什么顺序变了？因为现在先执行监听computedData的watch，它需要访问computedData.value，所以立即触发了computed的计算，然后才执行监听props.data的watch。
重要的知识点总结
通过这个实验，我们学到了几个重要的Vue知识点：
setup同步执行：setup函数中的代码是按顺序同步执行的
computed的惰性：计算属性只有在被访问时才会执行
watch的立即执行：设置了immediate: true的watch会在定义时立即执行一次
生命周期时机：onMounted总是在所有同步代码执行完毕后，DOM挂载完成时触发
实际开发中的应用
理解这些顺序对实际开发很有帮助：
避免在computed中产生副作用
因为computed的执行时机不确定，不要在里面进行数据修改等操作。
合理使用watch的immediate选项
如果需要watch在初始化时就执行一次，记得设置immediate: true。
注意数据依赖关系
如果watch依赖于computed的值，要确保computed先计算，可以通过调整代码顺序来实现。
更复杂的场景
在实际项目中，情况可能更复杂。比如如果有多个computed相互依赖，或者watch监听多个数据源，执行顺序会更难预测。
这时候，记住核心原则：computed是惰性的，watch的立即执行是同步的，生命周期钩子是异步的。
结语
通过这次深入的探索，我们彻底搞懂了Vue组件初始化的执行顺序。不再是靠猜测和试错，而是真正理解了背后的原理。
下次遇到类似问题时，你可以自信地分析代码执行顺序，写出更可靠、更易维护的Vue代码。
希望这篇文章对你有所帮助，让你在Vue开发道路上少走弯路！
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
