Блог

Главная - Вопросы по программированию - Жизненный цикл Vue3. Реактивная переменная не обновляется, когда используется в другой реактивной переменной

Жизненный цикл Vue3. Реактивная переменная не обновляется, когда используется в другой реактивной переменной

#vuejs3 #lifecycle

Вопрос:

У меня есть небольшая проблема с пониманием того, как работает жизненный цикл Vue 3.

Когда я запускаю фрагмент кода, результатом является значение: 2. Но если я удалю строку this.name = «vuepass» this.pass; (внутри функции beforeCreate) код работает так, как ожидалось, возвращая значение: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>

есть идеи?

Комментарии:

1. Мне просто интересно, когда data это доступно в крючке жизненного цикла. Но это должно быть идентично для Vue2 и Vue3…

Метки: ,