useRenderCache() 可组合项在使用 Vue 渲染函数时尤其有用（但不限于此）。当你通过迭代构建节点时，此可组合项可以帮助你内联代码，同时（出于性能原因）还可以受益于缓存。

¥The useRenderCache() composable is useful especially when you are dealing with Vue render functions (though not restricted to it). When you are building nodes through an iteration, this composable can help you inline the code while (for performance reasons) also benefitting from a cache.

在处理 SSR 时，服务器端不应缓存任何内容，因为每个客户端只会进行一次渲染（并且你也不希望内存占用不必要地增加）。因此，useRenderCache 可组合函数实际上不会在服务器端使用任何缓存，而是使用每次调用时提供的默认值。

¥When dealing with SSR, on the server-side you will not want to cache anything because the render will only happen once per client (and you don’t want your memory footprint to needlessly grow). Thus the useRenderCache composable will not actually use any cache on server-side, but rather the default values supplied on each call.

你可以直接缓存所需的任何类型的值。一些示例：

¥You can directly cache any type of value that you want. Some examples:

• 你可以缓存一些监听器，这样 Vue 就无需在每次重新渲染时删除并重新连接它们。

  ¥You can cache some listeners so that Vue won’t be required to remove and re-attach them on each re-render.

• 你可以缓存一些 Vue 渲染的节点，但在这种情况下必须小心，因为它们的内容不应依赖于任何 “reactive” 内容（refs、computed 等）。

  ¥You can cache some Vue rendered nodes, although you must be careful in this scenario because their content should not depend on any “reactive” content (refs, computed, etc).

语法(Syntax)

¥Syntax

import { useRenderCache } from 'quasar'

setup () {
  const {
    getCache,
    setCache,
    hasCache,
    clearCache
  } = useRenderCache()

  // ...
}

function useRenderCache(): {
  getCache: <T = any>(key: string, defaultValue?: T | (() => T)) => T;
  setCache: <T = any>(key: string, value: T) => void;
  hasCache: (key: string) => boolean;
  clearCache: (key?: string) => void;
};

示例(Example)

¥Example

下一个示例缓存了一些监听器，以避免 Vue 在每个渲染周期移除并重新附加它们：

¥The next example caches some listeners in order to avoid Vue removing and re-attaching them on each render cycle:

import { h } from 'vue'
import { useRenderCache } from 'quasar'

export default {
  setup () {
    const { getCache } = useRenderCache()

    function getNode (i) {
      return h('div', {
        onClick: getCache(
          `click#${ i }`,
          () => { console.log(`clicked on node ${ i }`) }
        )
      })
    }

    function getContent () {
      const acc = []
      for (let i = 0; i < 10; i++) {
        acc.push(
          getNode(i)
        )
      }
      return acc
    }

    return () => {
      h('div', getContent)
    }
  }
}

以下示例缓存了一些值，并调用第二个参数（一个函数）来生成默认值，仅当缓存中尚未设置该键时才执行。这样，即使已经设置了缓存，我们也可以避免不必要地运行该函数：

¥The following example caches some values and calls the second parameter (which is a Function) to generate the default value only when the cache has no such key already set. This way, we avoid needlessly running the function even if cache is already set:

const { getCache } = useRenderCache()

getCache('my-key', () => {
  // some computation which is only run
  // when the cache does NOT have "my-key" set
  return { some: 'object' }
})

需要避免的陷阱(Pitfall to avoid)

¥Pitfall to avoid

不要直接在 Vue h() 函数的第二个参数上进行缓存。这将篡改 Vue 的 DOM diff 算法。

¥Don’t cache directly on the second parameter of the Vue h() function. This will tamper with Vue’s DOM diff algorithm.

// DON'T cache like this:
h(
  'div',
  getCache(`node#${ i }`, () => {
    return {
      onClick () => { console.log(`clicked on node ${ i }`) }
    }
  })
)

// ..rather, do it like this:
h(
  'div',
  { // new such object needs to be created on each
    // render, even if the content is cached
    ...getCache(`node#${ i }`, () => {
      return {
        onClick () => { console.log(`clicked on node ${ i }`) }
      }
    })
  }
})