例一
const app = Vue.createApp({
data(){
return{
message:'hello world',
count:3,
price:6,
}
},
computed:{
total(){
return Date.now()
}
},
methods:{
methodstotal(){
return Date.now()
}
},
template:`
<div>{{ message }} {{ methodstotal() }}</div>
`
}).mount('#root');
当在浏览器控制台输入 app.$data.message = ‘nihao’ 发现
如果用computed计算属性来获取时间戳,时间戳不会改变
用methods方法来获取时间戳,时间戳改变
例二
const app = Vue.createApp({
data(){
return{
message:'hello world',
count:3,
price:6,
}
},
computed:{
total(){
return Date.now() + this.count
}
},
methods:{
methodstotal(){
return Date.now()
}
},
template:`
<div>{{ message }} {{ total }}</div>
`
}).mount('#root');
当在浏览器控制台输入 app.$data.message = ‘nihao’ 发现
如果用computed计算属性来获取时间戳,时间戳不会改变
用methods方法来获取时间戳,时间戳改变
当在浏览器控制台输入 app.$data.count = ‘100’ 发现时间戳改变了
结论:computed计算属性依赖的内容发生改变时,才会重新执行计算
methods方法只要页面重新渲染,才会重新计算