2-3-5 Vue3 computed

沿着路走到底

已于 2022-05-30 17:41:04 修改

阅读量146

点赞数

分类专栏： web 架构文章标签：前端

于 2022-05-30 17:40:45 首次发布

本文链接：https://blog.csdn.net/m0_38066007/article/details/125049743

版权

web 架构专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文深入探讨了Vue.js中的`computed`属性，它是一种基于依赖的计算缓存机制。与普通getter和setter相比，`computed`提供了自动缓存和依赖跟踪的功能，只在相关数据变化时重新计算。通过示例，我们展示了如何使用`computed`优化性能，避免不必要的计算。同时，对比了直接使用函数进行计算的方式，强调了`computed`的自动更新和依赖管理的优势。

摘要由CSDN通过智能技术生成

**`computed` 本质是一种基于依赖的计算缓存。**

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

思考一个问题：这个和普通的getter和setter有什么区别？为什么需要单独封装一个`computed` ?

export const ComputedExample03 = defineComponent({
  setup() {
    const count = ref(1)
    const plusOne = {
      get value() {
        return count.value + 1
      },
    }
    return () => {
      return <div>{plusOne.value}<button onClick={() => count.value ++}>+</button></div>
    }
  },
})

上面例子中触发`onClick` 可以使得组件刷新

`computed` 提供的是对计算的封装，让封装计算更容易。

export const ComputedExample01 = defineComponent({
  setup: () => {
    const msg = ref("hello")

    const reversedMsg = computed(() => {
      return msg.value.split("").reverse().join("")
    })

    return () => {
      return <div>
        <input onInput={(e) => {
          msg.value = (e.target as HTMLInputElement).value
        }} />
        {reversedMsg.value}
      </div>
    }
  },
})

具体的computed的定义：

function computed<T>(
  getter: () => T,
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>

当然上面的程序可以这样写，而不用computed:

export const ComputedExample02 = defineComponent({
  setup: () => {
    const msg = ref("hello")

    const reversedMsg = (msg : string) => {
      return msg.split("").reverse().join("")
    }

    return () => {
      return <div>
        <input onInput={(e) => {
          msg.value = (e.target as HTMLInputElement).value
        }} />
        {reversedMsg(msg.value)}
      </div>
    }
  },
})

保留个人观点：个人认为第二种方案语义更加清晰，因为第二种语义从语法上可以知道这是一次reversedMsg的计算。

最后， `computed` 和使用一个函数进行计算，有一个最本质的区别：

- computed会根据依赖重算

- 提供了基于依赖的缓存

例如下面程序中的`get` 只会触发一次，因为没有依赖的reactive值。

export const ComputedExample04 = defineComponent({
  setup() {
    let val = 1
    const someVal = computed({
      get: () => {
        console.log('run...')
        return val
      },
      set : () => {
        val++
      } 
    }) 
    return () => {
      return (
        <div>
          {someVal.value}
          <button onClick={() => {
            someVal.value ++
          }}>next</button>
        </div>
      )
    }
  },
})