区别
computed是属性调用,而methods是函数调用
computed带有缓存功能,而methods不是
computed计算复杂的逻辑使用
例子
1. 下面的代码h3写了三行, 但是computed中的comName方法只是执行一次, 除非相应的数据发生改变(点击修改按钮, comName方法再次执行了一次); 2. 下面的h4标签写了三行, methods中的methodName方法执行三次; 所以复杂耗时的东西写到computed中<template>
<div class="container">
<h3>{{ comName }}</h3>
<h3>{{ comName }}</h3>
<h3>{{ comName }}</h3>
<h4>{{ methodName() }}</h4>
<h4>{{ methodName() }}</h4>
<h4>{{ methodName() }}</h4>
<button @click="updateNameClick">修改</button>
</div>
<template>
import Footer from '@/components/footer.vue'
export default {
name: 'consult',
data () {
return {
testName: '张三丰'
}
},
computed: {
comName () {
console.log('计算属性, 依赖于缓存, 只有testName发生变化才会再次执行')
return '计算name=' + this.testName;
}
},
methods: {
methodName() {
console.log('方法名字, 调用一次执行一次')
return '方法name=' + this.testName;
},
updateNameClick () {
this.testName = '逍遥王';
},
}