乐趣区

关于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-componentmy-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 原生语法形容模版,是一个轻量模版引擎。

onMountedonUpdatedonUnmounted 是基于 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 奇妙的交融了三种技术计划,它们配合形式是:

  1. 应用 @vue/reactivity 创立响应式变量。
  2. 利用模版引擎 lit-html 创立应用了这些响应式变量的 HTML 实例。
  3. 利用 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 执行之前执行 _bmonBeforeMount,因为这个过程的确是筹备组件挂载的最初一步。

而后在 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 渲染模版引擎)之前调用 _buonBeforeUpdate,在执行了 render 函数后调用 _uonUpdated

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

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

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

别离实现 mountunmount。这也阐明了浏览器 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

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

关注 前端精读微信公众号

<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>

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

退出移动版