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值缓存起来

依赖项不变，多次调用都是缓存区直

依赖项值——变化，函数会“自动”重新执行并缓存新的值

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

猜你喜欢