vue源碼解讀-Flow

Jacendfeng 發布于2019-08-26 13:24 / 1446人閱讀

摘要：版本基于在閱讀源碼之前建議大家先了解下是出品的靜態類型檢查工具。的源碼利用了做了靜態類型檢查，所以了解有助于我們閱讀源碼這里簡單的介紹下的工作方式類型推斷通過變量的使用上下文來推斷出變量類型，然后根據這些推斷來檢查類型。

版本基于2.5.17-beta.0
在閱讀源碼之前建議大家先了解下Flow
Flow 是 facebook 出品的 JavaScript 靜態類型檢查工具。Vue.js 的源碼利用了 Flow 做了靜態類型檢查，所以了解 Flow 有助于我們閱讀源碼
這里簡單的介紹下Flow
Flow 的工作方式
類型推斷：通過變量的使用上下文來推斷出變量類型，然后根據這些推斷來檢查類型。
類型注釋：事先注釋好我們期待的類型，Flow 會基于這些注釋來判斷。

類型推斷

function split(str) {
    return str.split("")
}
split(11)

Flow 檢查上述代碼后會報錯，因為函數 split 期待的參數是字符串，而我們輸入了數字。

類型注釋
添加類型注釋可以提供更好更明確的檢查依據

/*@flow*/
function test(x: number, y: number): number {
    return x + y
}
test("str", 0)

因為函數參數的期待類型為數字，而我們提供了字符串。flow會報錯

flow中對數組，函數，類和對象都能添加類型注釋
數組

/*@flow*/

var arr: Array = [1, 2, 3]

arr.push("str")

類和對象

/*@flow*/

class Person {

constructor(name: string, age: string | number) {
this.name= name
this.age= age
this.sex= false
}}

var per: Person = new Person("xiaoli", 4)

var obj: { arr: Array, per: Person} = {
arr: ["hello"]
per: new Person("hello", 3)
}

想到數據類型大家當然忘不了 null， undefined
如果先讓任意類型可以是 null 或者 undefined 則需要寫成 ?T 的格式即可，注意T就是類型

/*@flow*/
var age: ?number = null
age可以為數字或者 null

云服務器 GPU云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

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

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

解讀Vue.use()源碼

摘要：的作用官方文檔的解釋安裝插件。下面展示源碼源碼中采用了的語法。語法，官方解釋是簡單的意思就是是代碼的靜態類型檢查工具。官網鏈接使用的好處就是在編譯期對代碼變量做類型檢查，縮短調試時間，減少因類型錯誤引起的。此時方法內的指向對象。 Vue.use() vue.use()的作用：官方文檔的解釋：安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一...

funnyZhang 2019-08-23 11:42 評論0 收藏0
vue源碼解讀-目錄結構

摘要：目錄結構構建相關的文件，一般情況下我們不需要動鉤子別名配置目錄結構 ├── scripts ------------------------------- 構建相關的文件，一般情況下我們不需要動│ ├── git-hooks ------------------------- git鉤子│ ├── alias.js -------------------------- 別名配...

philadelphia 2019-08-23 13:51 評論0 收藏0
vue 源碼學習（一）目錄結構和構建過程簡介

摘要：框架使用了作為類型檢查，來保證項目的可讀性和維護性。的主目錄下有的配置文件，還有目錄，指定了各種自定義類型。表示構建出來的文件遵循規范。 Flow vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。在學習源碼前可以先看下Flow的語法官方文檔目錄結構 vue....

lavnFan 2019-08-23 14:36 評論0 收藏0
Vue源碼之目錄結構

摘要：運行時用來創建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現代瀏覽器中通過直接導入。 Vue版本：2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續集成/持續部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 評論0 收藏0