gpt4 book ai didi

javascript - 为什么在beforeCreated/created/beforeMount中更改数据无法触发VUE中的watch?

转载 作者:行者123 更新时间:2023-12-01 00:26:02 27 4
gpt4 key购买 nike

为什么在beforeCreated/created/beforeMount中更改数据无法触发VUE中的watch?

<template>
<div>
<titi :namer="parentName"></titi>
</div>
</template>

<script>
export default {
components: {
titi: {
template: "<h1>{{namer}}</h1>",
props: ["namer"],
watch: {
namer: {
immediate: false,
handler(val, oldVal) {
console.log("jackieyin", val);
}
}
},
mounted() {
console.log("jackieyin", "mounted");
}
}
},
data: function() {
return {
parentName: "jackieyin"
};
},
beforeCreate() {
console.log(222);
this.parentName = "sunwukong";
},
created() {
this.parentName = "kewu";
},
beforeMount() {
this.parentName = "tangseng";
},
mounted() {
// var that = this;
// this.parentName = "tyty";
// setTimeout(() => {
// that.parentName = "shaseng";
// }, 500);
}
};
</script>

我尝试更改这些生命周期中的数据,但无法触发子元素 props watch。你可以在这里尝试一下: https://codesandbox.io/s/vue-watch-inx4z

最佳答案

这符合我的预期。如果您考虑下面的生命周期顺序,则在父组件上,子组件仅在父组件的 beforeMount 之后以及父组件的 mounted 之前创建。因此,您对子项的监视不会因父项在 beforeCreate 中或 created 中对 prop 进行的更改而触发,因为此时子项不存在。

  • 创建前
  • 父级已创建
  • 安装前
    • 创建前
      • 如果立即immediate:true,则子观察者将在此处触发,并传递初始值
    • 已创建
    • 安装前
    • 已安装
  • 对此处属性的任何更改都会从此时触发子观察程序
  • 父级已安装

在观察者中,您可以在 watch 上设置值immediate: false。这意味着,当设置属性的初始值时,它不会触发。如果将其更改为 true,您将看到父组件在 beforeMount 中设置的值会在创建子组件时立即触发监视。此外,如果您在父级 mounted 生命周期 Hook 中再次更改该值,则无论 immediate 的值如何,子级中的观察程序都会拾取该值。

关于javascript - 为什么在beforeCreated/created/beforeMount中更改数据无法触发VUE中的watch?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58991194/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com