vue computed计算属性

通过使用计算属性，我们可以将复杂的逻辑封装在属性中，使模板代码更简洁、可读性更强。此外，计算属性也可以与其他响应式属性和方法进行交互，使你能够更灵活地处理数据和逻辑。

特点

计算属性大致有以下三个特点：

• 自动更新：计算属性会自动追踪其依赖的响应式数据，并在依赖发生变化时重新计算。
• 缓存机制：计算属性会缓存其计算结果，只有在依赖发生变化时才会重新计算。这样可以避免不必要的计算开销。
• 延迟求值：计算属性只有在实际使用时才会进行求值计算。如果在模板中没有使用计算属性，那么它是不会进行计算的。

类型源码

下面代码块是vue computed计算属性的类型源代码。它可以帮助我们理解和使用计算属性功能。

interface ComponentOptions {
  computed?: {
    [key: string]: ComputedGetter<any> | WritableComputedOptions<any>
  }
}

type ComputedGetter<T> = (
  this: ComponentPublicInstance,
  vm: ComponentPublicInstance
) => T

type ComputedSetter<T> = (
  this: ComponentPublicInstance,
  value: T
) => void

type WritableComputedOptions<T> = {
  get: ComputedGetter<T>
  set: ComputedSetter<T>
}

上下文对象

vue computed计算属性是混入到vue实例中的，使用this自然也指向的vue组件实例。如果使用箭头函数，则可以通过第一个参数来访问实例，例如：

computed:{
    newNum:(vm)=> vm.num * 10 
}

只读属性

export default {
    data(){
        return {
            num:1
        }
    },
    computed:{
        newNum:function(){
            return this.num * 10
        },
        decrementNum:(vm) => vm.num / 10
    }
}

<template>
<div>{{newNum}}</div>
</template>

读写属性

在vue computed计算属性中，我们应该使用对象的getters和setters 方法来实现重写。因为计算属性数是混入到vue实例中的，this上下文对象也自然指向了vue的组件实例。如果使用箭头的函数，只有通过传参的方式。

export default {
    data(){
        return {
            num:10,
        }
    },
    computed:{
        newNum:{
            get(){
                return this.num;
            },
            set(val){
                this.num = val
            }
        }
    }
}

//写属性操作
this.newNum = 100

//读属性操作
this.newNum

响应式计算属性

Vue的计算属性是一种响应式的属性，它会根据依赖的数据自动更新。当依赖的数据发生变化时，计算属性会重新计算其值，并将新的值缓存起来，以便下次使用。

<template>
  <div>
    <p>原始值：{{ val }}</p>
    <p>计算属性：{{ newVal }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 10
    };
  },
  computed: {
    newVal() {
      // 在这里进行计算逻辑
      return this.val * 2;
    }
  }
};
</script>

在上面的示例中，我们定义了一个计算属性newVal，它依赖于val的值。当val发生变化时，newVal会自动重新计算，并更新模板中的显示。