When one of the data attributes of Vue will change, Vue will re-execute all instruction operations - vue.js

Question

I just want to change the value of msg，but all the instruction(v-for,v-text,v-bind) of the Vue will re-execute . How to solve this problem?
<div class="container">
<div id="app">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{Math.random()}}</div>
</div>
<div>{{Math.random()}}</div>
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello"
}
})
</script>

Answer 1

Because you embedded Math.random() in the template for the VUe, every time the DOM for the Vue needs to be updated (as in when you change msg), a new value will be calculated. One way you might solve this is to initialize the random value when the Vue is created.
var app = new Vue({
el: "#app",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello",
random: Math.random()
}
})
And then use the initialized value in your template.
<div id="app">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{random}}</div>
</div>
<div>{{random}}</div>
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
Another way you might solve the issue is to isolate the changes to msg in their own scope (a component).
Vue.component("message", {
props:["msg"],
template:`
<div>
<div>{{internalMessage}}</div>
<input type="text" v-model='internalMessage'>
</div>
`,
data(){
return {
internalMessage: this.msg
}
}
})
var app2 = new Vue({
el: "#app2",
data: {
list: [{ name: "I am Tom" }, { name: "I am Mary" }],
msg: "hello",
}
})
And the template:
<div id="app2">
<div v-for="item in list">
<div> {{item.name}} </div>
<div>{{Math.random()}}</div>
</div>
<div>{{Math.random()}}</div>
<message :msg="msg"></message>
</div>
Here is an example of both approaches.