使用步驟
1.編寫 頁面 模板
1.直接在html標籤中寫
2.使用template
3.使用單檔案（）
2.建立vue例項
1.在vue 的建構函式中：data,methods,computer,watcher,props,
...3.將vue掛載到頁面中（mount）
資料驅動模型
vue執行流程
1.獲得模板：模板中有『坑』
2.利用vue建構函式提供的資料來『填坑』，就可以得到頁面顯示的'標籤'了
3.替換原來有坑的標籤
vue 利用 我們提供的資料 和 頁面的 模板 生成了乙個新的html標籤（node元素），替換到了 頁面中 放置模板的位置
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
}<
/h1>
<
/div>
<
/body>
//步驟拆解
//1.拿到模板
//2.拿到資料（data）
//3.將資料與模板結合 得到html（dom元素）
//4.放到頁面中
//1let template = document.
queryselector()
//2let data =
//3//將資料放到模板中
//遞迴
//在這個案例中 template 是dom
//在vue原始碼中是dom=>字串模板=>vnode=>真正的dom
function
complier
(template,data)
}let rex =
/\\}/g
let txt = childnodes[i]
.nodevalue //文字內容
//有沒有花括號
//replace 使用正則匹配一次 函式被呼叫一次
//函式的第0個引數 表示匹配到的內容
//函式的n個引數表示正則的第n組
txt = txt.
replace
(rex,
function
(_, g)
}return value
})//修改dom元素
childnodes[i]
.nodevalue = txt
}else
if(type ===1)
}}let gennode = template.
clonenode
(true
)//轉殖dom
//如果不轉殖 沒有生成新的template 這裡直接在頁面生成資料， dom是引用型別
//這樣做模板就沒了
console.
log(template)
complier
(gennode, data)
console.
log(gennode)
//4replacechild
//上面的思路有問題
使用的 虛擬dom
//2.只考慮了單屬性} vue 大量使用層級 （}）
//3.**沒有整合
<
/script>
<
/html>
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
>
}<
/h1>
<
/div>
<
/body>
function
complier
(template, data)
}let rex =
/\\}/g
let txt = childnodes[i]
.nodevalue //文字內容
txt = txt.
replace
(rex,
function
(_, g)
}return value
})//修改dom元素
childnodes[i]
.nodevalue = txt
}else
if(type ===1)
}}function
mvue
(options)
//將模板結合資料， 得到html 加到頁面
mvue.prototype.
render
=function()
//編譯 將模板與資料結合 得到真正dom
mvue.prototype.
complier
=function()
//更新 放到頁面
mvue.prototype.
update
=function
(real)
newmvue(}
})//使用『***.yyy』 來訪問物件
//就是用該字元中的路徑來訪問物件成員
function
getvaluebypath
(obj, path)
return res
}//vue原始碼實現方式的設計模式
//函式柯里化處理
//vue 編譯模板時生成
//模板=》抽象語法樹=》虛擬dom
// function creategetvaluebypath(path)
// return res
// }
// }
//通過這種處理，因為模板是不變的 所以我們每次使用 只需要傳入物件
//減少函式的呼叫 提公升效能
// let getvaluebypath = creategetvaluebypath('name.first')
// let res = getvaluebypath(obj)
<
/script>
<
/html>
Vue原始碼分析
在開始原始碼分析工作之前，我們在當前篇章做好相應的準備工作，以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...
lucene update流程原始碼分析
update操作buffer到documentswriterdeletequeue裡，flush時處理deletes.documentswriterdeletequeue使用global deleteslice和dwpt deleteslice儲存deletes。dwpt deleteslice 用...
vue原始碼分析1
在vue的原始碼中使用的是es5的方法 prototype.slice.bind obj 來實現的 例如 已 為例 obj 定義屬性的物件 prop 定義或修改屬性的名稱 descriptor 將被定義或修改的屬性描述符 value 預設值 configurable 是否可以重新定義 enumera...