vue的第一份正式源碼

Tikitoo 發布于2019-08-14 15:06 / 2224人閱讀

摘要：提交這可以說是的第一份正式源碼，已經有了基本的骨架原型。上面所說的綁定操作都是針對于這個來的。如則在模板中聲明一個指令的時候，即實現了指令與的綁定。如上便是當前版本的基本運行原理。

提交：a5e27b1174e9196dcc9dbb0becc487275ea2e84c
commit: naive implementation

這可以說是vue的第一份正式源碼，已經有了基本的骨架原型。

源碼主要包含三個文件: main.js、directives.js、filters.js

運行原理：

節點收集，找到根節點以及根節點之下的所有包含指令的節點.

解析指令節點

關聯數據與節點

監測指令節點的set操作，并調用指令的更新函數

偽代碼：

/*根節點以及所有指令節點獲取，這里指令節點的selector采用屬性選擇器來選擇*/
root = document.getElementById(opts.id),
els  = root.querySelectorAll(selector)

/**
 * 節點處理
 */
;[].forEach.call(els, processNode)
processNode(root)

/**
 * processNode中主要做了如下三步
 */
parseDirective()
bindDirective()
bindAccessors()

這里需要注意一點是 scope 的概念，vue是采用數據響應式的思想，這里的數據即對應一個vue實例里的 scope(也可稱它為作用域，最新版本已改為data/vueInstance.$data)。上面所說的綁定操作都是針對于這個scope來的。

如：

scope = {
    hello: "ahahah"
}

則在模板中聲明一個v-text="hello"指令的時候，即實現了v-text指令與scope.hello的綁定。

如上便是當前版本vue的基本運行原理。

作者設計思想解讀

通過指令的聲明方式實現某一DOM片段與某一javascript對象的關聯

數值關聯，JS中的一個 String 對應于DOM中的一個或多個 textNode

函數關聯，JS中的一個方法對應于DOM節點的事件函數

set監測

通過如下示例來觀看作者指令語法的設計思想：

模板


    
    YOYOYO

var Seed = require("seed")
var app = Seed.create({
    id: "test",
    // template
    scope: {
        msg: "hello",
        hello: "WHWHWHW",
        changeMessage: function () {
            app.scope.msg = "hola"
        }
    }
})

指令語句即 DOM 節點中的一個屬性，如sd-text="msg | capitalize",等號前面為指令的名稱，等號后面為指令的值。

受于字符串所能表達信息量的限制，作者在指令名稱上采用 "-" 讓指令名變成結構類型的數據，以此來增加指令的靈活性(標簽的屬性是不區分大小寫的，所以不能采用駝峰式的命名).值對應組件作用域中的一個鍵名，這里通過管道符可以擴展相應的功能。

實質上來說，與普通的變量聲明方式是一樣的：

/*javascript 變量聲明*/
var text = "ahahah";
var onClick = function changeMessage () {};

/*vue 指令聲明, hello 和 changeMessage 則對應 scope 中的 hello 和 changeMessage的值*/
v-text="hello";
v-on-click="changeMessage";

注：組件對象數據與指令關聯是一對多的關系

這樣，一個微型的vue就成型了。

GPU云服務器云服務器第一份 php一周的第一天本月的第一天js 中國的第一條互聯網專線

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/65286.html

性能優化

摘要：如果你的運行緩慢，你可以考慮是否能優化請求，減少對的操作，盡量少的操，或者犧牲其它的來換取性能。在認識描述這些核心元素的過程中，我們也會分享一些當我們構建的時候遵守的一些經驗規則，一個應用應該保持健壯和高性能來維持競爭力。一個開源的前端錯誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團隊最近開發了一款前端錯誤收集工具，名叫 frontend-tracker ，這款...

liangzai_cool 2019-08-22 13:45 評論0 收藏0
Vue.js 實踐（2）：實現多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

Profeel 2019-08-21 10:51 評論0 收藏0
Vue.js 實踐（2）：實現多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

ChanceWong 2019-08-01 15:21 評論0 收藏0
axios源碼閱讀（一）

摘要：開始研究核心代碼這個類首先是構造函數看完上面的內容大家應該有點印象，上掛了和，是默認的配置，顧名思義就是攔截器，目測包含了和兩種類型。喜歡就點個贊吧參考文章源代碼重點難點分析源代碼重點難點分析 axios是一個基于promise的http庫，支持瀏覽器和node端，最近我在做beauty-we的api設計，研讀一個成熟的http庫勢在必行，axios功能完整、api簡潔、注釋清晰，再適...

k00baa 2019-08-22 18:26 評論0 收藏0