关于javascript:精读vuelit-源码

vue-lit 基于 lit-html + @vue/reactivity 仅用 70 行代码就给模版引擎实现了 Vue Composition API，用来开发 web component。

<my-component></my-component>

<script type="module">
  import {
    defineComponent,
    reactive,
    html,
    onMounted,
    onUpdated,
    onUnmounted
  } from 'https://unpkg.com/@vue/lit'

  defineComponent('my-component', () => {
    const state = reactive({
      text: 'hello',
      show: true
    })
    const toggle = () => {state.show = !state.show}
    const onInput = e => {state.text = e.target.value}

    return () => html`
      <button @click=${toggle}>toggle child</button>
      <p>
      ${state.text} <input value=${state.text} @input=${onInput}>
      </p>
      ${state.show ? html`<my-child msg=${state.text}></my-child>` : ``}
    `
  })

  defineComponent('my-child', ['msg'], (props) => {const state = reactive({ count: 0})
    const increase = () => {state.count++}

    onMounted(() => {console.log('child mounted')
    })

    onUpdated(() => {console.log('child updated')
    })

    onUnmounted(() => {console.log('child unmounted')
    })

    return () => html`
      <p>${props.msg}</p>
      <p>${state.count}</p>
      <button @click=${increase}>increase</button>
    `
  })
</script>

下面定义了 my-component 与 my-child 组件，并将 my-child 作为 my-component 的默认子元素。

import {
  defineComponent,
  reactive,
  html, 
  onMounted,
  onUpdated,
  onUnmounted
} from 'https://unpkg.com/@vue/lit'

defineComponent 定义 custom element，第一个参数是自定义 element 组件名，必须遵循原生 API customElements.define 对组件名的标准，组件名必须蕴含中划线。

reactive 属于 @vue/reactivity 提供的响应式 API，能够创立一个响应式对象，在渲染函数中调用时会主动进行依赖收集，这样在 Mutable 形式批改值时能够被捕捉，并主动触发对应组件的重渲染。

html 是 lit-html 提供的模版函数，通过它能够用 Template strings 原生语法形容模版，是一个轻量模版引擎。

onMounted、onUpdated、onUnmounted 是基于 web component lifecycle 创立的生命周期函数，能够监听组件创立、更新与销毁机会。

接下来看 defineComponent 的内容：

defineComponent('my-component', () => {
  const state = reactive({
    text: 'hello',
    show: true
  })
  const toggle = () => {state.show = !state.show}
  const onInput = e => {state.text = e.target.value}

  return () => html`
    <button @click=${toggle}>toggle child</button>
    <p>
    ${state.text} <input value=${state.text} @input=${onInput}>
    </p>
    ${state.show ? html`<my-child msg=${state.text}></my-child>` : ``}
  `
})

借助模版引擎 lit-html 的能力，能够同时在模版中传递变量与函数，再借助 @vue/reactivity 能力，让变量变动时生成新的模版，更新组件 dom。

浏览源码能够发现，vue-lit 奇妙的交融了三种技术计划，它们配合形式是：

应用 @vue/reactivity 创立响应式变量。
利用模版引擎 lit-html 创立应用了这些响应式变量的 HTML 实例。
利用 web component 渲染模版引擎生成的 HTML 实例，这样创立的组件具备隔离能力。

其中响应式能力与模版能力别离是 @vue/reactivity、lit-html 这两个包提供的，咱们只须要从源码中寻找剩下的两个性能：如何在批改值后触发模版刷新，以及如何结构生命周期函数的。

首先看如何在值批改后触发模版刷新。以下我把与重渲染相干代码摘出来了：

import {effect} from 'https://unpkg.com/@vue/reactivity/dist/reactivity.esm-browser.js'

customElements.define(
  name,
  class extends HTMLElement {constructor() {super()
      const template = factory.call(this, props)
      const root = this.attachShadow({mode: 'closed'})
      effect(() => {render(template(), root)
      })
    }
  }
)

能够清晰的看到，首先 customElements.define 创立一个原生 web component，并利用其 API 在初始化时创立一个 closed 节点，该节点对外部 API 调用敞开，即创立的是一个不会受内部烦扰的 web component。

而后在 effect 回调函数内调用 html 函数，即在应用文档里返回的模版函数，因为这个模版函数中应用的变量都采纳 reactive 定义，所以 effect 能够精准捕捉到其变动，并在其变动后从新调用 effect 回调函数，实现了“值变动后重渲染”的性能。

而后看生命周期是如何实现的，因为生命周期贯通整个实现流程，因而必须联合全量源码看，上面贴出全量外围代码，下面介绍过的局部能够疏忽不看，只看生命周期的实现：

let currentInstance

export function defineComponent(name, propDefs, factory) {if (typeof propDefs === 'function') {
    factory = propDefs
    propDefs = []}

  customElements.define(
    name,
    class extends HTMLElement {constructor() {super()
        const props = (this._props = shallowReactive({}))
        currentInstance = this
        const template = factory.call(this, props)
        currentInstance = null
        this._bm && this._bm.forEach((cb) => cb())
        const root = this.attachShadow({mode: 'closed'})
        let isMounted = false
        effect(() => {if (isMounted) {this._bu && this._bu.forEach((cb) => cb())
          }
          render(template(), root)
          if (isMounted) {this._u && this._u.forEach((cb) => cb())
          } else {isMounted = true}
        })
      }
      connectedCallback() {this._m && this._m.forEach((cb) => cb())
      }
      disconnectedCallback() {this._um && this._um.forEach((cb) => cb())
      }
      attributeChangedCallback(name, oldValue, newValue) {this._props[name] = newValue
      }
    }
  )
}

function createLifecycleMethod(name) {return (cb) => {if (currentInstance) {;(currentInstance[name] || (currentInstance[name] = [])).push(cb)
    }
  }
}

export const onBeforeMount = createLifecycleMethod('_bm')
export const onMounted = createLifecycleMethod('_m')
export const onBeforeUpdate = createLifecycleMethod('_bu')
export const onUpdated = createLifecycleMethod('_u')
export const onUnmounted = createLifecycleMethod('_um')

生命周期实现形如 this._bm && this._bm.forEach((cb) => cb())，之所以是循环，是因为比方 onMount(() => cb()) 能够注册屡次，因而每个生命周期都可能注册多个回调函数，因而遍历将其顺次执行。

而生命周期函数还有一个特点，即并不分组件实例，因而必须有一个 currentInstance 标记以后回调函数是在哪个组件实例注册的，而这个注册的同步过程就在 defineComponent 回调函数 factory 执行期间，因而才会有如下的代码：

currentInstance = this
const template = factory.call(this, props)
currentInstance = null

这样，咱们就将 currentInstance 始终指向以后正在执行的组件实例，而所有生命周期函数都是在这个过程中执行的， 因而当调用生命周期回调函数时，currentInstance 变量必然指向以后所在的组件实例 。

接下来为了不便，封装了 createLifecycleMethod 函数，在组件实例上挂载了一些形如 _bm、_bu 的数组，比方 _bm 示意 beforeMount，_bu 示意 beforeUpdate。

接下来就是在对应地位调用对应函数了：

首先在 attachShadow 执行之前执行 _bm – onBeforeMount，因为这个过程的确是筹备组件挂载的最初一步。

而后在 effect 中调用了两个生命周期，因为 effect 会在每次渲染时执行，所以还特意存储了 isMounted 标记是否为初始化渲染：

effect(() => {if (isMounted) {this._bu && this._bu.forEach((cb) => cb())
  }
  render(template(), root)
  if (isMounted) {this._u && this._u.forEach((cb) => cb())
  } else {isMounted = true}
})

这样就很容易看懂了，只有初始化渲染过后，从第二次渲染开始，在执行 render（该函数来自 lit-html 渲染模版引擎）之前调用 _bu – onBeforeUpdate，在执行了 render 函数后调用 _u – onUpdated。

因为 render(template(), root) 依据 lit-html 的语法，会间接把 template() 返回的 HTML 元素挂载到 root 节点，而 root 就是这个 web component attachShadow 生成的 shadow dom 节点，因而这句话执行完结后渲染就实现了，所以 onBeforeUpdate 与 onUpdated 一前一后。

最初几个生命周期函数都是利用 web component 原生 API 实现的：

connectedCallback() {this._m && this._m.forEach((cb) => cb())
}
disconnectedCallback() {this._um && this._um.forEach((cb) => cb())
}

别离实现 mount、unmount。这也阐明了浏览器 API 分层的清晰之处，只提供创立和销毁的回调，而更新机制齐全由业务代码实现，不论是 @vue/reactivity 的 effect 也好，还是 addEventListener 也好，都不关怀，所以如果在这之上做残缺的框架，须要本人依据实现 onUpdate 生命周期。

最初的最初，还利用 attributeChangedCallback 生命周期监听自定义组件 html attribute 的变动，而后将其间接映射到对 this._props[name] 的变动，这是为什么呢？

attributeChangedCallback(name, oldValue, newValue) {this._props[name] = newValue
}

看上面的代码片段就晓得起因了：

const props = (this._props = shallowReactive({}))
const template = factory.call(this, props)
effect(() => {render(template(), root)
})

早在初始化时，就将 _props 创立为响应式变量，这样只有将其作为 lit-html 模版表达式的参数（对应 factory.call(this, props) 这段，而 factory 就是 defineComponent('my-child', ['msg'], (props) => {.. 的第三个参数），这样一来，只有这个参数变动了就会触发子组件的重渲染，因为这个 props 曾经通过 Reactive 解决了。

vue-lit 实现十分奇妙，学习他的源码能够同时理解一下几种概念：

reative。
web component。
string template。
模版引擎的精简实现。
生命周期。

以及如何将它们串起来，利用 70 行代码实现一个优雅的渲染引擎。

最初，用这种模式创立的 web component 引入的 runtime lib 在 gzip 后只有 6kb，但却能享受到现代化框架的响应式开发体验，如果你感觉这个 runtime 大小能够忽略不计，那这就是一个十分现实的创立可保护 web component 的 lib。

探讨地址是：精读《vue-lit 源码》· Issue #396 · dt-fe/weekly

如果你想参加探讨，请点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

关于javascript:精读vuelit-源码

概述

精读

总结