&

手擼一個Vue

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2025年8月7日 15:25 本文熱度 400

背景

vue是啥，有哪些基本功能，模板，script, style, 雙向綁定一大堆，太多東西了，太難了，直接開始動手吧

倉庫

https://github.com/listen80/two-way-binding

體驗一下（pc上使用）

https://listen80.github.io/two-way-binding/public/

單文件

通過ajax獲取類似.vue .html .tpl文件

const parser = new DOMParser();

export default (template) => {
    const doc = parser.parseFromString(`<body>${template}</body>`, 'text/html');
    const body = doc.querySelector('body')
    return {
        template: body.querySelector('template')?.content,
        script: body.querySelector('script'),
        style: body.querySelector('style'),
    }
};

構建vue實例

把script文本變成script運行
把原始data變成reactive的形式，增加依賴收集
解析template,扣出來指令，屬性，方法，子組件等為了區分指令前綴使用@而不是v-
掛載style樣式增加
替換當前實例掛載的元素，目前為止所有的元素（html, script, style）都已經使用上來了

  // ...上面還有
  /**
   * 創建組件，加載組件腳本、樣式和模板，并進行渲染
   */
  create() {
    // 從配置選項中解構出目標元素和屬性
    const { el, props = {} } = this.options
    // 從組件屬性中解構出腳本、模板和樣式
    const { script, template, style } = this.componentProperties
    // 1. 獲取的ES6代碼是模
    // 獲取腳本標簽中的 ES6 模塊代碼
    const es6ModuleCode = script.textContent;

    // 2. 將代碼轉為blob URL（模擬模塊文件）
    // 創建一個包含 ES6 模塊代碼的 Blob 對象
    const blob = new Blob([es6ModuleCode], { type: 'text/javascript' });
    // 為 Blob 對象創建一個 URL
    const url = URL.createObjectURL(blob);

    // 3. 用動態import()加載該模塊
    // 動態導入模塊
    import(url).then(module => {
      // 將樣式添加到文檔中
      document.head.append(style)
      // console.log(module.default); // 輸出 'ES6 Module'
      // 獲取模塊中的數據，若不存在則使用空對象
      const data = module.default.data || {};
      // 獲取模塊中的方法，若不存在則使用空對象
      const methods = module.default.methods || {};
      // 獲取模塊中的子組件，若不存在則使用空對象
      const components = module.default.components || {};
      // 將屬性和數據合并到當前實例
      Object.assign(this, props, data);
      // 對當前實例進行數據觀測
      observe(this);
      // this.data = data
      // 編譯模板并渲染
      compile(template, this, methods, components);
      // 終于明白這里為什么是replace
      // 用模板替換目標元素
      el.replaceWith(template)
    }).catch(err => {
      // 捕獲模塊加載失敗的錯誤并打印
      console.error('加載模塊失敗', err);
    });
  }

總結

就這么結束了，是不是很簡單，當然其中的細節很多，上文主要是描述核心思想點
本demo是沒有使用虛擬dom,是dom跟數據直接綁定的，跟進vue3.6 vapor
水平有限，本文只是為了學習分享簡單的示例，目的是為了了解運作機制

轉自https://www.cnblogs.com/listen80/p/19026582

該文章在 2025/8/7 15:25:02 編輯過

關鍵字查詢

一個

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。