Блог

Главная - Вопросы по программированию - Методы Vue — вызова в усах

Методы Vue — вызова в усах

#vue.js #vuejs3

Вопрос:

 <span>{{ count }}</span>      <- output: 104     why not 3
<span>{{ move() }}</span>     <- output: 104     why not 4

<script>
data() {
    return {
        count: 3
    }
},
methods: {
    move() {
        return this.count  ;
    }
}
</script>

[Предупреждение Vue]: Превышено максимальное количество рекурсивных обновлений в компоненте . Это означает, что у вас есть реактивный эффект, который изменяет свои собственные зависимости и, таким образом, рекурсивно запускает себя. Возможные источники включают шаблон компонента, функцию рендеринга, обновленный хук или функцию источника наблюдателя.

Почему…не 3 или 4?

Ответ №1:

это потому, что у вас есть move() шаблон, и каждый раз, когда шаблон отображается, значение обновляется, в результате чего шаблон отображается снова.

Это рекурсия, о которой браузер уведомил, что вы превысили максимальное количество, остановившись на 104.

Вы можете назначить функцию для выполнения по щелчку мыши следующим образом:

 <span>{{ count }}</span>
<span @click="move">move</span>
<script>
data() {
    return {
        count: 3
    }
},
methods: {
    move() {
        return this.count  ;
    }
}
<script>

Ответ №2:

Вы создаете рекурсивный рендеринг при изменении count , если вы хотите распечатать, вы можете добавить его и избежать изменения count 

 new Vue({
  el: '#app',
  data() {
    return {
      count: 3
    }
  },
  methods: {
    move() {
      return this.count   1;
    }
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>{{ count }}</span>
  <span>{{ move() }}</span>
</div>
Метки: