vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > v-lazy-show编译模板指令

antfu大佬的v-lazy-show教我学会了怎么编译模板指令

作者:暴走老七

这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

一开始关注到 antfu 是他的一头长发,毕竟留长发的肯定是技术大佬。果不其然,antfu 是个很高产、很 creative 的大佬,我也很喜欢他写的工具,无论是@antfu/eslint-configunocss、还是vitest等等。

而这篇文章故事的起源是,我今天中午逛 github 的时候发现大佬又又又又开了一个新的 repo(这是家常便饭的事),v-lazy-show

看了下是两天前的,所以好奇点进去看看是什么东东。

介绍是:

A compile-time directive to lazy initialize v-show for Vue. It makes components mount after first truthy value (v-if), and the DOM keep alive when toggling (v-show).

简单的说,v-lazy-show 是一个编译时指令,就是对 v-show 的一种优化,因为我们知道,v-show 的原理只是基于简单的切换 display none,false则为none,true则移除

但即使在第一次条件为 falsy 的时候,其依然会渲染对应的组件,那如果该组件很大,就会带来额外的渲染开销,比如我们有个 Tabs,默认初始显示第一个 tab,但后面的 tab 也都渲染了,只是没有显示罢了(实际上没有必要,因为可能你点都不会点开)。

那基于此种情况下,我们可以优化一下,即第一次条件为 falsy 的情况下,不渲染对应的组件,直到条件为 truthy 才渲染该组件。

将原本的 v-show 改为 v-lazy-show 或者 v-show.lazy

<script setup lang="ts">
import { ref } from 'vue'
import ExpansiveComponent from './ExpansiveComponent.vue'
class="brush:js;"const enabled = ref(false)
</script>
class="brush:js;"<template>
  <button @click="enabled = !enabled">
    Toggle
  </button>
class="brush:js;"  <div class="hello-word-wrapper">
    <ExpansiveComponent v-lazy-show="enabled" msg="v-lazy-show" />
    <ExpansiveComponent v-show.lazy="enabled" msg="v-lazy.show" />
class="brush:js;"    <ExpansiveComponent v-show="enabled" msg="v-show" />
class="brush:js;"    <ExpansiveComponent v-if="enabled" msg="v-if" />
  </div>
</template>
<!-- ExpansiveComponent.vue -->
<script setup lang="ts">
import { onMounted } from 'vue'
class="brush:js;"const props = defineProps({
  msg: {
    type: String,
    required: true,
  },
})
class="brush:js;"onMounted(() => {
  console.log(`${props.msg} mounted`)
})
</script>
class="brush:js;"<template>
  <div>
    <div v-for="i in 1000" :key="i">
      Hello {{ msg }}
    </div>
  </div>
</template>

ExpansiveComponent 渲染了 1000 行 div,在条件 enabled 初始为 false 的情况下,对应 v-show 来说,其依然会渲染,而对于 v-lazy-show 或 v-show.lazy 来说,只有第一次 enabled 为 true 才渲染,避免了不必要的初始渲染开销

如何使用?

国际惯例,先装下依赖,这里强烈推荐 antfu 大佬的 ni

npm install v-lazy-show -D
yarn add v-lazy-show -D
pnpm add v-lazy-show -D
ni v-lazy-show -D

既然是个编译时指令,且是处理 vue template 的,那么就应该在对应的构建工具中配置,如下:

如果你用的是 vite,那么配置如下

// vite.config.ts
import { defineConfig } from 'vite'
import { transformLazyShow } from 'v-lazy-show'
class="brush:js;"export default defineConfig({
  plugins: [
    Vue({
      template: {
        compilerOptions: {
          nodeTransforms: [
            transformLazyShow, // <--- 加在这里
          ],
        },
      },
    }),
  ]
})

如果你用的是 Nuxt,那么应该这样配置:

// nuxt.config.ts
import { transformLazyShow } from 'v-lazy-show'
class="brush:js;"export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      nodeTransforms: [
        transformLazyShow, // <--- 加上这行
      ],
    },
  },
})

那么,该指令是如何起作用的?

上面的指令作用很好理解,那么其是如何实现的呢?我们看下大佬是怎么做的。具体可见源码

源码不多,我这里直接贴出来,再一步步看如何实现(这里快速过一下即可,后面会一步步分析):

import {
  CREATE_COMMENT,
  FRAGMENT,
  createCallExpression,
  createCompoundExpression,
  createConditionalExpression,
  createSequenceExpression,
  createSimpleExpression,
  createStructuralDirectiveTransform,
  createVNodeCall,
  traverseNode,
} from '@vue/compiler-core'
class="brush:js;"const indexMap = new WeakMap()
class="brush:js;"// https://github.com/vuejs/core/blob/f5971468e53683d8a54d9cd11f73d0b95c0e0fb7/packages/compiler-core/src/ast.ts#L28
const NodeTypes = {
  SIMPLE_EXPRESSION: 4,
}
class="brush:js;"// https://github.com/vuejs/core/blob/f5971468e53683d8a54d9cd11f73d0b95c0e0fb7/packages/compiler-core/src/ast.ts#L62
const ElementTypes = {
  TEMPLATE: 3,
}
class="brush:js;"// https://github.com/vuejs/core/blob/f5971468e53683d8a54d9cd11f73d0b95c0e0fb7/packages/shared/src/patchFlags.ts#L19
const PatchFlags = {
  STABLE_FRAGMENT: 64,
}
class="brush:js;"export const transformLazyShow = createStructuralDirectiveTransform(
  /^(lazy-show|show)$/,
  (node, dir, context) => {
    // forward normal `v-show` as-is
    if (dir.name === 'show' && !dir.modifiers.includes('lazy')) {
      return () => {
        node.props.push(dir)
      }
    }
class="brush:js;"    const directiveName = dir.name === 'show'
      ? 'v-show.lazy'
      : 'v-lazy-show'
class="brush:js;"    if (node.tagType === ElementTypes.TEMPLATE || node.tag === 'template')
      throw new Error(`${directiveName} can not be used on <template>`)
class="brush:js;"    if (context.ssr || context.inSSR) {
      // rename `v-lazy-show` to `v-if` in SSR, and let Vue handles it
      node.props.push({
        ...dir,
        exp: dir.exp
          ? createSimpleExpression(dir.exp.loc.source)
          : undefined,
        modifiers: dir.modifiers.filter(i => i !== 'lazy'),
        name: 'if',
      })
      return
    }
class="brush:js;"    const { helper } = context
    const keyIndex = (indexMap.get(context.root) || 0) + 1
    indexMap.set(context.root, keyIndex)
class="brush:js;"    const key = `_lazyshow${keyIndex}`
class="brush:js;"    const body = createVNodeCall(
      context,
      helper(FRAGMENT),
      undefined,
      [node],
      PatchFlags.STABLE_FRAGMENT.toString(),
      undefined,
      undefined,
      true,
      false,
      false /* isComponent */,
      node.loc,
    )
class="brush:js;"    const wrapNode = createConditionalExpression(
      createCompoundExpression([`_cache.${key}`, ' || ', dir.exp!]),
      createSequenceExpression([
        createCompoundExpression([`_cache.${key} = true`]),
        body,
      ]),
      createCallExpression(helper(CREATE_COMMENT), [
        '"v-show-if"',
        'true',
      ]),
    ) as any
class="brush:js;"    context.replaceNode(wrapNode)
class="brush:js;"    return () => {
      if (!node.codegenNode)
        traverseNode(node, context)
class="brush:js;"      // rename `v-lazy-show` to `v-show` and let Vue handles it
      node.props.push({
        ...dir,
        modifiers: dir.modifiers.filter(i => i !== 'lazy'),
        name: 'show',
      })
    }
  },
)

createStructuralDirectiveTransform

因为是处理运行时的指令,那么自然用到了 createStructuralDirectiveTransform 这个函数,我们先简单看下其作用:

createStructuralDirectiveTransform 是一个工厂函数,用于创建一个自定义的 transform 函数,用于在编译过程中处理特定的结构性指令(例如 v-for, v-if, v-else-if, v-else 等)。

该函数有两个参数:

nameMatcher:一个正则表达式或字符串,用于匹配需要被处理的指令名称。

fn:一个函数,用于处理结构性指令。该函数有三个参数:

createStructuralDirectiveTransform 函数会返回一个函数,该函数接收一个节点对象和编译上下文对象,用于根据指定的 nameMatcher 匹配到对应的指令后,调用用户自定义的 fn 函数进行处理。

在编译过程中,当遇到符合 nameMatcher 的结构性指令时,就会调用返回的处理函数进行处理,例如在本例中,当遇到 v-show 或 v-lazy-show 时,就会调用 transformLazyShow 处理函数进行处理。

不处理 v-show

if (dir.name === 'show' && !dir.modifiers.includes('lazy')) {
    return () => {
      node.props.push(dir)
    }
  }

因为 v-show.lazy 是可以生效的,所以 v-show 会进入该方法,但如果仅仅只是 v-show,而没有 lazy 修饰符,那么实际上不用处理

这里有个细节,为何要将指令对象 push 进 props,不 push 行不行?

原先的表现是 v-show 条件为 false 时 display 为 none,渲染了节点,只是不显示:

而注释node.props.push(dir)后,看看页面表现咋样:

v-show 的功能没了,也就是说指令的功能会添加到 props 上,所以这里要特别注意,不是单纯的返回 node 即可。后来还有几处node.props.push,原理跟这里一样。

服务端渲染目前是转为 v-if

if (context.ssr || context.inSSR) {
      // rename `v-lazy-show` to `v-if` in SSR, and let Vue handles it
  node.props.push({
    ...dir,
    exp: dir.exp
      ? createSimpleExpression(dir.exp.loc.source)
      : undefined,
    modifiers: dir.modifiers.filter(i => i !== 'lazy'),
    name: 'if',
  })
  return
}

将 v-lazy-show 改名为 v-if,且过滤掉修饰符

createVNodeCall 给原先节点包一层 template

顾名思义,createVNodeCall 是 用来创建一个 vnode 节点的函数:

const body = createVNodeCall(
      /** 当前的上下文 (context) 对象,即 CodegenContext */
      context,
      /** helper 函数是 Vue 内部使用的帮助函数。FRAGMENT 表示创建 Fragment 节点的 helper 函数 */
      helper(FRAGMENT),
      /** 组件的 props */
      undefined,
      /** 当前节点的子节点数组,即包含有指令的节点本身 */
      [node],
      /** 表示该节点的 PatchFlag,指明了该节点是否稳定、是否具有一些特定的更新行为等。STABLE_FRAGMENT 表示该 Fragment 节点是一个稳定的节点,即其子节点不会发生改变 */
      PatchFlags.STABLE_FRAGMENT.toString(),
      /** 该节点的动态 keys */
      undefined,
      /** 该节点的模板引用 (ref) */
      undefined,
      /** 表示该节点是否需要开启 Block (块) 模式,即是否需要对其子节点进行优化 */
      true,
      /** 表示该节点是否是一个 Portal 节点 */
      false,
      /** 表示该节点是否是一个组件 */
      false /* isComponent */,
      /** 该节点在模板中的位置信息 */
      node.loc,
)

参数含义如下,简单了解即可(反正看了就忘)

也就是说,其会生成如下模板:

<template>
  <ExpansiveComponent v-lazy-show="enabled" msg="v-lazy-show" />
</template>

关键代码(重点)

接下来这部分是主要原理,请打起十二分精神。

先在全局维护一个 map,代码中叫 indexMap,是一个 WeakMap(不知道 WeakMap 的可以去了解下)。然后为每一个带有 v-lazy-show 指令的生成一个唯一 key,这里叫做_lazyshow${keyIndex},也就是第一个就是_lazyshow1,第二个是_lazyshow2...

  const keyIndex = (indexMap.get(context.root) || 0) + 1
  indexMap.set(context.root, keyIndex)
class="brush:js;"  const key = `_lazyshow${keyIndex}`

然后将生成的key放到渲染函数的_cache上(渲染函数的第二个参数,function render(_ctx, _cache)),即通过_cache.${key}作为辅助变量。之后会根据 createConditionalExpression 创建一个条件表达式

const wrapNode = createConditionalExpression(
      createCompoundExpression([`_cache.${key}`, ' || ', dir.exp!]),
      createSequenceExpression([
        createCompoundExpression([`_cache.${key} = true`]),
        body,
      ]),
      // 生成一个注释节点 `<!--v-show-if-->`
      createCallExpression(helper(CREATE_COMMENT), [
        '"v-show-if"',
        'true',
      ]),
)

也就是说, v-lazy-show 初始传入的条件为 false 时,那么会为你创建一个注释节点,用来占位:

createCallExpression(helper(CREATE_COMMENT), [
  '"v-show-if"',
  'true',
])

这个跟 v-if 一样

直到第一次条件为真时,将 _cache.${key} 置为 true,那么以后的行为就跟 v-show 一致了,上面的 dir.exp 即指令中的条件,如

<div v-show="enabled"/>

enabled 即 exp,表达式的意思。

readme给出的转换如下:

<template>
  <div v-lazy-show="foo">
    Hello
  </div>
</template>

会转换为:

import { Fragment as _Fragment, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, openBlock as _openBlock, vShow as _vShow, withDirectives as _withDirectives } from 'vue'
class="brush:js;"export function render(_ctx, _cache) {
  return (_cache._lazyshow1 || _ctx.foo)
    ? (_cache._lazyshow1 = true, (_openBlock(),
      _withDirectives(_createElementVNode('div', null, ' Hello ', 512 /* NEED_PATCH */), [
        [_vShow, _ctx.foo]
      ])))
    : _createCommentVNode('v-show-if', true)
}

你可以简单理解为会将<ExpansiveComponent msg="v-lazy-show" v-lazy-show=""enabled"/>转为下面:

<template v-if="_cache._lazyshow1 || enabled">
    <!-- 为true时会把_cache._lazyshow1置为true,那么以后的v-if就用于为true了 -->
    <ExpansiveComponent msg="v-lazy-show" v-lazy-show="enabled"/>
</template>
<template v-else>
  <!--v-show-if-->
</template>
class="brush:js;"<template v-if="_cache._lazyshow2 || enabled">
    <!-- 为true时会把_cache._lazyshow2置为true,那么以后的v-if就用于为true了 -->
    <ExpansiveComponent msg="v-lazy-show" v-show.lazy="enabled"/>
</template>
<template v-else>
  <!--v-show-if-->
</template>

然后将原先节点替换为处理后的 wrapperNode 即可

context.replaceNode(wrapNode)

最后将 v-lazy-show | v-shouw.lazy 处理为 v-show

因为 vue 本身是没有 v-lazy-show 的,v-show 也没有 lazy 的的修饰符,那么要让指令生效,就要做到两个:

node.props.push({
   ...dir,
   modifiers: dir.modifiers.filter(i => i !== 'lazy'),
   name: 'show',
 })

也就变成这样啦:

<template v-if="_cache._lazyshow1 || enabled">
    <!-- 为true时会把_cache._lazyshow1置为true,那么以后的v-if就用于为true了 -->
    <ExpansiveComponent msg="v-lazy-show" v-show="enabled"/>
</template>
<template v-else>
  <!--v-show-if-->
</template>
<template v-if="_cache._lazyshow2 || enabled">
    <!-- 为true时会把_cache._lazyshow2置为true,那么以后的v-if就用于为true了 -->
    <ExpansiveComponent msg="v-show.lazy" v-show="enabled"/>
</template>
<template v-else>
  <!--v-show-if-->
</template>

小结一下:

为每一个使用 v-lazy-show 分配唯一的 key,放到渲染函数内部的_cache上,即借助辅助变量_cache.${key}

最后

以上就是我对该运行时编译插件的认识了,可以将 repo 拉下来,上面有个 playground,可以自己调试调试,说不定有新的认识。

好了,文章到此为止,你今天学废了吗?

以上就是antfu大佬的v-lazy-show,我学会了怎么编译模板指令的详细内容,更多关于v-lazy-show编译模板指令的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文