Vuejs почему вызываются все методы?

Question

В следующем коде первый тег p отображает name, и он также привязан к событию ввода поля ввода. Существует метод random, который генерирует случайное число. И это отображается в последнем теге p. Хотите знать, почему random method вызывается для каждого символа input в поле input? Разве это не должно быть выполнено только одно?

Я знаю, что могу добавить Vuejs директиву v-once к последнему тегу p, и он останется прежним.

Может ли кто-нибудь помочь мне лучше понять это?

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el:"#exercise",
data: {
    name: "Tokyo",
},
methods: {
    changeName: function(event){
        this.name = event.target.value;
    },
    random: function(){
        return Math.random();
    }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="exercise">
    <p>VueJS is pretty cool - {{ name }}</p>
    <br/>
    <input type="text" v-bind:value="name" v-on:input="changeName">
    <br/>
    <p>{{random()}}</p>
</div>

Answer 1

Он обновляется, потому что он привязан к вашему экземпляру vue. Всякий раз, когда name изменяется, он автоматически изменяется в DOM.

С каждым нажатием клавиши вы запускаете метод changeName. Теперь changeName заменяет name. Vue. js обнаружите это изменение и обновите DOM.