Subscribe on changes!

Render function supports using ``v-memo`` directive

avatar
Sep 13th 2021

What problem does this feature solve?

Render function is a flexible method of creating vnode, but v-memo is not supported.

Conveniently implementations v-for v-if and v-show. but v-memo absolutely is an exception.

Nobody wants without vue-next context, using lodash or native js to implement cache methods.

I think we need v-memo supporting in render function

What does the proposed API look like?

withDirectives(render, [resolveDirective('memo')])
avatar
Sep 16th 2021

v-memo is a purely compile-time directive. You can consult how the compiler generate the code though. Manually using the internal helper would look like this:

import { h, ref, withMemo } from 'vue'

export default {
  setup() {
    const cache = []
    const foo = ref(0)

    return () => {
      return withMemo([foo.value], () => h('div'), cache, 0)
    }
  }
}
avatar
Sep 17th 2021

Thanks for your replying.