computed:自带缓存机制,数据不发生改变,他就会用之前缓存过的数据
methods:页面的每次渲染都会重新计算
例子1:
<template>
<div>
{
{fullName}} {
{age}}
<button @click="age++">点我啊</button>
</div>
</template>
<script>
export default {
name:'computed',
data(){
return {
firstName: 'Dell',
lastName: 'Lee',
age: 28
}
},
computed:{ // 计算属性自带缓存功能,只有它里面的数据发生改变了才会重新计算!
fullName(){
console.log("计算了")
return this.firstName + " " + this.lastName
}
}
}
</script>
例子2:
<template>
<div>
{
{fullName()}} {
{age}}
<button @click="age++">点我啊</button>
</div>
</template>
<script>
export default {
name:'computed',
data(){
return {
firstName: 'Dell',
lastName: 'Lee',
age: 28
}
},
methods:{ // methods只要有数据发生改变了,就会重新计算
fullName(){
console.log("计算了")
return this.firstName + " " + this.lastName
}
}
}
</script>