Vue3 生命周期当在另一个反应变量中使用时，反应变量不会更新

问题描述

我在理解 Vue 3 生命周期的工作原理时遇到了一点问题。

当我运行代码片段时，结果是 Value: 2。但是如果我删除 this.name = "vuepass" + this.pass;（在 beforeCreate 函数内），代码会按预期工作，返回一个 Value :3。

我知道在 beforeCreate 中修改反应变量没有意义，因为反应系统还没有创建，但我不明白这一事实有没有影响。事实上，我在 Vue 2 中也做过同样的测试，并且运行正常。

const app = {
  data() {
      return {
        pass: 0,name: "value"
      }
  },beforeCreate() {
    this.pass++;
    this.name = "vuepass" + this.pass;
    console.log(">> BEFORECREATE");
  },created() {
    this.pass++;
    console.log(">> CREATED");
  },beforeMount() {
    this.pass++;
    console.log(">> BEFOREMOUNT");
  },mounted() {
    this.pass++;
    console.log(">> MOUNTED");
  },beforeUpdate() {
    console.log(">> BEFOREUPDATE");
  },updated() {
    console.log(">> UPDATED");
  }
};

const application = Vue.createApp(app);
const vm = application.mount("#mydiv");

<!DOCTYPE html>
<html lang="es">
  <head>
    <Meta charset="UTF-8">
    <title>Lifecycle Vue v3</title>
  </head>
  <body>
    <div id="mydiv">
      <p>{{ name }}: {{ pass }}</p>
    </div>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
</html>

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lifecycle lifecycle vuejs3