目标: 一个数据, 依赖另外一些数据计算而来的结果
语法:
computed: {
"计算属性名" () {
return "值"
}
}
例
<template>
<div>
<h4>计算属性</h4>
<input type="text" v-model.number="a">+
<input type="text" v-model.number="b">=
<input type="text" v-model.number="total">
<div>{
{total()}}</div>
</div>
</template>
<script>
export default {
computed:{
total(){
console.log('计算属性执行了');
return this.a +this.b
}
},
data(){
return {
a:6,
b:8
}
},
}
</script>
.计算属性和方法的区别(面试题)
- 性能
计算属性是具有缓存,当依赖项发生改变的时候计算属性会进行结果重新运算
方法布局有缓存
- 语法
计算属性属于属性调用 不需要加()
函数调用时要加()
例
<template>
<div>
<div>{
{total}}</div>
<div>{
{total}}</div>
<div>{
{total}}</div>
<hr>
<div>{
{sum()}}</div>
<div>{
{sum()}}</div>
<div>{
{sum()}}</div>
</div>
</template>
<script>
export default {
computed:{
total(){
console.log('计算属性执行了');//只执行一次
return this.a +this.b
}
},
data(){
return {
a:6,
b:8
}
},
methods: {
sum(){
console.log('方法被调用了');
return this.a +this.b
}
}
}
</script>
打印结果
优势:
- 带缓存
- 计算属性对应函数执行后,会把return值缓存起来
- 依赖项不变,多次调用都是缓存区直
- 依赖项值——变化,函数会“自动”重新执行 并缓存新的值