Vue源码学习：手写Vue（四）—— compile

最新推荐文章于 2025-06-17 11:07:02 发布

9级浪

最新推荐文章于 2025-06-17 11:07:02 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/xliang111/article/details/106669100

本文介绍了一个自定义的HTML模板编译器实现，通过编译HTML模板并进行依赖收集，实现数据响应式更新。文章详细展示了如何将DOM元素转换为文档碎片，编译元素节点和插值表达式，并通过递归方式处理子节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现comile类，用与编译html模板

class Compile {
  constructor(el, vm) {
    this.$vm = vm
    this.$el = document.querySelector(el)

    if (this.$el) {
      this.$fragment = this.node2Fragment(this.$el)
      // 编译模板内容，同时进行依赖收集
      this.compile(this.$fragment)
      this.$el.appendChild(this.$fragment)
    }
  }
  node2Fragment(el) {
    const fragment = document.createDocumentFragment()
    let child
    while (child = el.firstChild) {
      fragment.appendChild(child)
    }
    return fragment
  }
  compile(el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 判断节点类型
      if (node.nodeType === 1) {
        // element节点
        console.log('编译元素节点：' + node.nodeName)
      }
      else if (this.isInterpolation(node)) {
        // 插值表达式
        console.log('编译插值文本：' + node.textContent)
      }
      // 递归子节点
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })

  }
  isInterpolation(node) {
    // 是文本且符合{{}}
    return node.nodeType === 3 && /\{\{(.*)\}\}/  // 只兼容无空格{{name}}
  }
}

测试一下
在这里插入图片描述
2、我下来实现一下compileText()方法，用于编译文本节点

compileText(node){
    node.textContent = this.$vm[RegExp.$1]
}

调用compileText
在这里插入图片描述
测试

已经{{massage}}已经被替换了为真实文本了

源码地址
https://github.com/hxlTeam/hvue.git