vue3中computed计算属性函数

Posted 2023-05-27 mengdie1978

vue3中computed计算属性函数

目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。

computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。

1. 基本使用：只读

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click=\'age=25\'>点击</button>
    <div>今年：age岁了</div>
    <div>明年：nextAge岁了</div>
  </div>
</template>

<script>
import  ref, computed  from \'vue\'

export default 
  name: \'App\',
  setup () 
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // 计算属性基本使用
    const nextAge = computed(() => 
      // 回调函数必须return，结果就是计算的结果
      // 如果计算属性依赖的数据发生变化，那么会重新计算
      return age.value + 1
    )

    return  age, nextAge 
  

</script>

<style lang="less">
</style>

总结：Vue3中计算属性也是组合API风格

回调函数必须return，结果就是计算的结果
如果计算属性依赖的数据发生变化，那么会重新计算
不要在计算中中进行异步操作

2 高级用法：可读可写

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click=\'age=25\'>点击</button>
    <button @click=\'nextAge=28\'>点击修改</button>
    <div>今年：age岁了</div>
    <div>明年：nextAge岁了</div>
  </div>
</template>

<script>
import  ref, computed  from \'vue\'

export default 
  name: \'App\',
  setup () 
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // // 计算属性基本使用
    // const nextAge = computed(() => 
    //   // 回调函数必须return，结果就是计算的结果
    //   // 如果计算属性依赖的数据发生变化，那么会重新计算
    //   return age.value + 1
    // )

    // 修改计算属性的值
    const nextAge = computed(
      get () 
        // 如果读取计算属性的值，默认调用get方法
        return age.value + 1
      ,
      set (v) 
        // v是计算属性下传递的实参
        // 如果要想修改计算属性的值，默认调用set方法
        age.value = v - 1
      
    )

    return  age, nextAge 
  

</script>

<style lang="less">
</style>

总结：

计算属性可以直接读取或者修改
如果要实现计算属性的修改操作，那么computed的实参应该是对象
读取数据触发get方法
修改数据触发set方法，set函数的形参就是你赋给他的值

[Vue] 计算属性Computed与函数function的异同

[Vue] 计算属性Computed与函数function的异同

在Vue中计算属性与函数都能够实现相同的效果，返回相同的值，但是区别在于计算属性依赖于内存，只要所依赖的属性没有发生改变计算出来属性值也不会发生变化，所以当所依赖的属性没有发生变化时，就不在执行计算操作。

Vue中的函数虽然也能够实现计算属性所达到的效果，但是函数不管所依赖的属性值有没有发生变化都会重新的渲染，执行该函数。