vue-日常筆記

在使用vue過程中的一些筆記吧，以前都是記doc，偶爾寫在git，不過感覺還是放在博客，易於瀏覽一些。隨時根據看到的東西更新……

1.模板編譯原理

https://segmentfault.com/a/1190000006990480
https://mp.weixin.qq.com/s/OPQ5Nh_f3rp1mAkqsj6oDg
https://juejin.im/post/5ab2ff496fb9a028c06ab78f

1.1：html中的節點類型：

      https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

基於vue2的源碼：

1.2：vue中的解析器類型：

　　

解析AST節點過程中主要用到了HTML解析器，主要過程如下：

parseHTML（
    template,
    // 開始標籤鉤子函數
    start (tag, attrs, unary, start, end){
        // let element = createASTElement(tag, attrs, currentParent);
        let element = (function (tag, attrs, parent) {
            return {
                type: 1,
                tag,
                attrsList: attrs,
                children: [],
                parent,
            }
        })();
    }
    // 文本標籤鉤子函數
    chars (text, start, end) {
        // 文本節點的鉤子函數，會忽略空格。同時會在模板中將這些空格截取掉。
        return {
            type: 3,
            text
        }
    }
    // 註釋鉤子函數
    comment (text, start, end) {
        return {
            type: 3, // Node.COMMENT_NODE是8，爲什麼這裏要寫成type 3
            text,
            isComment: true
        }
    }
    // 結束標籤鉤子函數
    end (tag, start, end) {
        // 將當前構建節點從AST層級關係棧中彈出來
    }
）

解析開始標籤時，比如<div>和<input />，可通過解析標籤結尾得到該標籤是不是自閉合標籤，自閉合標籤沒有子節點，所以一定是ast樹的尾結點，解析時不必入棧。
怎麼存儲ast樹的呢？

 

在start之前如何解析得到tag、attrs、unary？

 

 

 

<div class="temp" id="test"></div>
在解析上述模板時，利用正則表達式判斷整段template是否有開始標籤，如果有，得到標籤名，然後截斷，剩下class="temp" id="test"></div>，繼續利用正則解析屬性，得到class，截斷，剩下id="test"></div>，繼續解析屬性得到id，截斷，剩下></div>，再解析時發現是標籤結尾，結束。得到了tag、attrs。

1.3：構建AST層級關係樹

用棧來記錄AST的dom層級關係，類似於dom的深度。（原理很像c語言編譯時候）

 

 

 

 

解析過程是一個循環遞歸的過程，不斷的截取開始或者結束標籤，入棧出棧，這個棧可以幫助元素獲取父元素，還能判斷html標籤元素是否正確閉合。。

純文本內容元素，script、style、texteara，不需要被解析到ast中，直接當做文本advance即可。

1.4：文本解析器

文本分兩種類型，不帶變量的純文本和帶變量的文本，後者需要使用文本解析器進行二次加工。

 

2.vDom和Dom-diff

https://mp.weixin.qq.com/s/3G3VrG5VzOEBU5EcyCK7gg

創建虛擬DOM
　　createElement(type, props, children) 用來創建虛擬dom
　　　　• type: 指定元素的標籤類型，如'li', 'div', 'a'等
　　　　• props: 表示指定元素身上的屬性，如class, style, 自定義屬性等
　　　　• children: 表示指定元素是否有子節點，參數以數組的形式傳入
渲染DOM
　　render(就是vue的h)方法可以將虛擬DOM轉化成真實DOM

DOM-diff比較兩個虛擬DOM的區別

 

diff-patch算法： https://github.com/aooy/blog/issues/2 

 

3.composition api的一些用法

因爲我一直記不住這種寫法，所以……搞個備份，哈哈哈哈哈

3.1 v-model

 

 

 3.2 Hook

官方示例-邏輯提取與複用：https://composition-api.vuejs.org/zh/#%E9%80%BB%E8%BE%91%E6%8F%90%E5%8F%96%E4%B8%8E%E5%A4%8D%E7%94%A8

提取公用的一些自定義的hook

 

4.期待中……