在本例中，我通过以下方法更改name":
new Vue({el: '#锻炼',数据: {name: '彼得',},方法: {随机:函数(){返回 Math.random();},更改名称:函数(事件){this.name = event.target.value;}}})<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="锻炼"><p>VueJS 非常酷 - {{ name }}</p><p>{{random()}}</p><div><input v-on:input="changeName" type="text">但是每次我调用方法 changeName 时，另一个方法(random)也会被调用.
为什么?
相比之下，只要发生重新渲染，方法调用将始终运行该函数.
什么时候重新渲染?当数据发生变化时.
在您的示例中，每当您输入 <input>(因为它调用 changeName)时，数据(即 name)都会发生变化.
查看生命周期图 - 更多具体来说，Mounted"红球:
查看下面的演示，您会看到那些生命周期事件正在发生(以及它们之间的重新渲染):
new Vue({el: '#锻炼',数据: {name: '彼得',},更新前(){console.log('beforeUpdate 执行');},更新() {console.log('更新执行');},方法: {随机:函数(){返回 Math.random();},更改名称:函数(事件){this.name = event.target.value;}}})<script src="https://unpkg.com/vue/dist/vue.min.js"></脚本><div id="锻炼"><p>VueJS 非常酷 - {{ name }}</p><p>{{random()}}</p><div><input v-on:input="changeName" type="text">On this example, I change the "name" via the method:
new Vue({
el: '#exercise',
data: {
name: 'Petr',
},
methods: {
random: function() {
return Math.random();
},
changeName: function(event) {
this.name = event.target.value;
}
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="exercise">
<p>VueJS is pretty cool - {{ name }}</p>
<p>{{ random() }}</p>
<div>
<input v-on:input="changeName" type="text">
</div>
</div>But each time I call the method changeName the other method (random) also is called.
Why?
From Computed Properties - Computed Caching vs Methods:
And when does a re-render happen? When data changes.
And in your example data (i.e. name) changes whenever you type into the <input> (because it calls changeName).
Check the lifecycle diagram - more specifically, the "Mounted" red ball:
Check the demo below, so you see those lifecycle events are happening (and thus the re-rendering between them):
new Vue({
el: '#exercise',
data: {
name: 'Petr',
},
beforeUpdate() {
console.log('beforeUpdate executed');
},
updated() {
console.log('updated executed');
},
methods: {
random: function() {
return Math.random();
},
changeName: function(event) {
this.name = event.target.value;
}
}
})<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="exercise">
<p>VueJS is pretty cool - {{ name }}</p>
<p>{{ random() }}</p>
<div>
<input v-on:input="changeName" type="text">
</div>
</div>这篇关于从方法中只调用一种方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！