Vuejs为什么所有的方法都被调用？

Question

在下面的代码中，第一个标签p 呈现name 并且它还绑定到输入字段的输入事件。 有一种称为随机的方法，它会生成随机数。它在最后一个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。