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

Question

在下面的代码中，第一个标签 p 呈现 name 并且它也绑定到输入字段的输入事件。有一种称为随机的方法，它会生成随机数。它呈现在最后一个 p 标签中。想知道为什么要为 input 框中的每个字符 input 调用 random method？那不应该只执行一个吗？

我知道我可以将 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。

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

Vuejs why all the methods are called?

vue.js

vue-directives