VueJS正在更新事件上的另一个元素

Question

我刚刚开始学习VueJS，在编写一些代码时，我注意到另一个HTML元素正在更新。

app.js

const app = Vue.createApp({
data(){
return {
name: "Name",
age: 21,
url: "",
input_data: "",
}   
},
methods: {
getRandom(){
return Math.random();
},
setText(event){
this.input_data = event.target.value;
},
}
}).mount('#assignment');

index.html

<section id="assignment">
<h2>{{name}}</h2>
<input type="text" v-on:input="setText($event)" />
<p>{{input_data}}</p>
<p>{{age}}</p>
<p>{{age+5}}</p>
<p>Favorite Number: {{getRandom()}}</p>
<div>
<img v-bind:src="url" />
</div>
</section>

每当我在输入字段中输入文本时，它都会用｛｛input_data｝｝更新

标记，但它也会更新"收藏夹编号"部分，这与预期不同。有人知道为什么会发生这种事吗？

我正在使用CDN 的最新版本Vue(3.0.5(

谢谢，

-Atharva

Answer 1

Alireza已经提供了一个变通方法/解决方案，但下面是解释。

当你的Vue应用程序加载时，它会读取你提供的模板，并用值替换所有｛｛标签｝｝。要获得｛｛getRandom((｝｝的值，它调用方法getRandom(。

每当任何基础值发生变化时，Vue都会重复此过程。现在，您可以在屏幕上看到新的值。这就是他们对Vue反应性的理解。

现在，由于您更改了input_data，模板将被重新评估，这将再次调用getRandom((函数。这就是为什么当您输入一些文本时，该值"意外"更改的原因。

Answer 2

之所以会发生这种情况，是因为当您更改组件数据(状态(时，组件将被重新渲染。当组件重新渲染时，您的getRandom((方法将再次执行并生成新的随机数。

在您的情况下，由于您更改了组件数据而发生重新报价：

this.input_data = event.target.value;

如果您想防止这种行为，您应该将getRandom((函数放在computed中，而不是方法中。

Answer 3

编辑：vuejs使用虚拟DOM在数据更改时重新渲染组件，因此当您在代码中使用类似的方法时，它会运行getRandom((，因为更改了input_data。

你必须放

getRandom(){
return Math.random();
},

在计算中

computed:{
getRandom(){
return Math.random();
},
},
methods: {
setText(event){
this.input_data = event.target.value;
},
}