vue计算属性-computed（面试题）

目标: 一个数据, 依赖另外一些数据计算而来的结果

 语法：

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值缓存起来
• 依赖项不变，多次调用都是缓存区直
• 依赖项值——变化，函数会“自动”重新执行 并缓存新的值