- 计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。
- 而每当触发重新渲染时,调用方法总会再次执行函数。
<div>计算属性方式:{{ reveres1 }}</div>
<div>方法方式:{{ reveresMethod2() }}</div>
<button @click="() => $forceUpdate()">改变</button>
<input v-model="message"></div>
export default {
name: "aCom",
data() {
return {
message: 'Hello World'
}
},
computed: {
reveres1() {
console.log('执行了reveres1');
return this.message.split('').reverse().join('');
}
},
methods: {
reveresMethod2() {
console.log('执行了reveresMethod2');
return this.message.split('').reverse().join('');
}
}
};