vue3的api解读-computed

目录

第一个层理解：计算函数

/src/examples/ComputedExamplese.tsx

第二层理解：为计算提供缓存

小节

---

第一个层理解：计算函数

• 将计算封装到一个纯函数
• Coding：这样的函数如何实现？

/src/examples/ComputedExamplese.tsx

import { ref, defineComponent, computed } from 'vue'
function reverse(str: string) { // 字符串反转，计算函数
  // [...str] 字符串 转 数组
  // [...str].reverse() 数组反转
  // [...str].reverse().join("") 反转后的数组重新拼接为字符串
  return [...str].reverse().join("")
}
export const ComputedExample01 = defineComponent({
  setup() {
    const c = ref("hello")
    return () => {
      return 

        {reverse(c.value)}
         {
          c.value = (e.target as HTMLInputElement).value
        }} />
      
    }
  }
})
export const ComputedExample02 = defineComponent({
  setup() {
    const c = ref("hello")
    const s = computed(() => {
      return reverse(c.value)
    })
    return () => {
      return 

        {s.value}
         {
          c.value = (e.target as HTMLInputElement).value
        }} />
      
    }
  }
})
export const ComputedExample03 = defineComponent({
  setup() {
    const c = ref("hello")
    const s = computed({
      get() {
        return reverse(c.value)
      },
      set(str: string) {
        c.value = str + "@"
      }
    })
    return () => {
      return 

        {s.value}
         {
          s.value = (e.target as HTMLInputElement).value
        }} />
      
    }
  }
})

第二层理解：为计算提供缓存

• Coding:根据函数参数缓存的decorator

import { ref, defineComponent, computed } from 'vue'
// 1 1 2 3 5 8
let fib = function (n: number): number {
  if (n === 1 || n === 2) {
    return 1
  }
  return fib(n - 1) + fib(n - 2)
}
fib = cache(fib)
// 高阶函数之缓存
function cache(f: Function) {
  const m: {
    [key: string]: any
  } = {}
  function hash(...args: any[]) {
    return args.map(x => x.toString()).join("-")
  }
  return (...args: any[]) => {
    const h = hash(...args)
    if (h in m) {
      return m[h]
    }
    const r = f(...args)
    m[h] = r
    return r
  }
}
export const ComputedExample04_1 = defineComponent({
  setup() {
    // 例：n是斐波那契数列的第n项
    const n = ref(1)
    return () => {
      return 

        Fibor value: fib(n.value)}
         {
          n.value++
        }}>index++
      
    }
  }
})

• Coding:computed的缓存效果

import { ref, defineComponent, computed } from 'vue'
// 1 1 2 3 5 8
let fib = function (n: number): number {
  if (n === 1 || n === 2) {
    return 1
  }
  return fib(n - 1) + fib(n - 2)
}
fib = cache(fib)
// 高阶函数之缓存
function cache(f: Function) {
  const m: {
    [key: string]: any
  } = {}
  function hash(...args: any[]) {
    return args.map(x => x.toString()).join("-")
  }
  return (...args: any[]) => {
    const h = hash(...args)
    if (h in m) {
      return m[h]
    }
    const r = f(...args)
    m[h] = r
    return r
  }
}
export const ComputedExample04 = defineComponent({
  setup() {
    // 例：n是斐波那契数列的第n项
    const n = ref(1)
    const c = ref(0)
    const fibValue = computed(() => {
      console.log('compute fib ', n.value) // 初始化一次
      return fib(n.value) // fibValue 的 computed的缓存只跟n相关，n不变就读缓存
    })
    setInterval(() => { // 不触发fibValue的computed
      c.value++
    }, 1000)
    return () => {
      return 

        Fibor value: {fibValue.value}
         {
          n.value++
        }}>index++
        {c.value}
      
    }
  }
})

小节

思考1：什么时候用computed？当有昂贵的计算时，当有1w+个数据需要排序时

思考2：如果vue3不提供computed，我们自己可以实现吗？很困难，不好写，我们需要知道所有的依赖【watch这个依赖】，进行缓存

function myComputed(f:Function) {
    const value = f()
    watch()// 没有watch，而vue自己有这个watch；所以我们写很困难，vue提供会很容易。
    return value
}