在 onBeforeMount 之前计算的属性触发器

Question

我收到错误，因为我的计算属性期望某个变量充满数据，但我在onBeforeMount中加载数据，由于某种原因，在我的计算属性之后被触发。

我的理论为什么会发生这种情况：

当我删除我的观察程序时，问题就消失了。 观察程序触发"myComputedProperty"的计算，因为它需要旧值，以便它可以将其与新值进行比较，并在调用watch()后立即执行此操作。

这是否意味着我必须在onBeforeMount中注册我的观察者以避免此类行为？

相关代码：

<script setup>
import { ref, watch, computed, onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log("onBeforeMount")
valueThatIsFilledInBeforeMount = 1;
});
const myComputedProperty = computed(() => {
//some code
return valueThatIsFilledInBeforeMount + 1;
})
watch(myComputedProperty , async (newValue, oldValue) => {
//some code
})
</script>

我正在使用的东西：

• "@quasar/附加"： "^1.0.0"，
• "axios"： "^0.21.1"，
• "fast-xml-parser"： "^4.0.10"，
• "pinia"： "^2.0.11"，
• "类星体"： "^2.6.0"，
• "vue"： "^3.0.0"，
• "vue-router"： "^4.0.0"，
• "XLSX"： "https://cdn.sheetjs.com/xlsx-0.18.11/xlsx-0.18.11.tgz">

Answer 1

您是否尝试在数据导出中初始化值ThatIsFilledInBeforeMount？

我用我的配置测试了它，除非我没有使用初始值(0 或 null 或 smth)导出我的 valueToCompute，否则我的计算值工作正常：

export default {
data() {
return {
valueBeforeMount: null,
}
},
beforeMount() {
this.valueBeforeMount = 1;
},
computed: {
valueBeforeMountComp() {
return this.valueBeforeMount + 1;
},
},
watch: {
valueBeforeMountComp: function(newVal, oldVal) {
console.log(newVal) // Should be 2
console.log(oldVal) // Should be 1
},
}
}

至少如果我把你的问题弄对了。