成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用console.log分析Vue源碼

cod7ce / 2362人閱讀

摘要：前言本文通過的一些特性結(jié)合的源碼通過一個簡單的例子讓你了解的各個過程的變化控制臺輸出的效果圖請用查看并打開控制臺看效果演示地址準(zhǔn)備的創(chuàng)建下載文件在中引入我寫了一個簡單的例子涵蓋初始化視圖點擊后更新視圖包括各個鉤子函數(shù)代碼如下

前言

本文通過console.log的一些特性,結(jié)合vue.js的源碼,通過一個簡單的例子,讓你了解Vue的各個過程的變化.
控制臺輸出的效果圖

請用chrome查看,并打開控制臺看效果
演示地址
準(zhǔn)備 vue-console.html的創(chuàng)建

下載vue.js文件,在vue-console.html中引入,我寫了一個簡單的例子,涵蓋:初始化視圖->點擊后更新視圖(包括各個鉤子函數(shù))
代碼如下:

  
  

    
{{name}}
console.log樣式的配置 
var tagLeftStyle = [
  "color: #fff",
  "border-top-left-radius:3px",
  "border-bottom-left-radius:3px",
  "background-color: #564b4f",
  "padding: 5px"
].join(";")

var tagRightStyle = function (color) {
  color = color?color:"#0BCF1B"
  return [
    "color: #fff",
    "border-top-right-radius:3px",
    "border-bottom-right-radius:3px",
    `background-color: ${color}`,
    "padding: 5px"
  ].join(";")
}
// ...
// 一些樣式省略,具體可以去看源碼
var tagVariable = function (obj, tag, desc, num, detail, color) {
  console.log(`%c${lineNo} %o%c<---%c${tag}%c${desc}  %c源碼${num}行 %c說明: %o`, noStyle, obj, arrowStyle ,tagLeftStyle, tagRightStyle(color), sourceNoStyle, detailStyle, detail)
  lineNo++
}
// %c代表后面的文本,使用css樣式,%o代表對象輸出


上面的代碼只要調(diào)用tagVariable(...)傳遞參數(shù),就實現(xiàn)上圖的標(biāo)簽效果,
還可以console.log顯示圖片,加了一下講解圖方便理解;


通過調(diào)用上面封裝的函數(shù)在vue.js某些時刻調(diào)用,就達(dá)到很好的效果

項目過程

我將整個過程分為四個階段: 構(gòu)造函數(shù)階段、初始化階段、掛載階段 、更新階段,
會以上面提到的例子貫穿的

構(gòu)造函數(shù)階段

平常我們使用Vue,都是用new Vue({}),其實就是調(diào)用它的構(gòu)造函數(shù)創(chuàng)建實例,如下圖

初始化階段

會對我們傳入data、methods等處理,便于后面階段的調(diào)用及一些功能的實現(xiàn)
如例子的data的name會被代理到vm實例上,所以我們可以用this.name調(diào)用

data() {
  return {
    name: "點我",
  }
}

掛載階段 

  
{{name}}

會將上面的html渲染成視圖(這里面包括渲染函數(shù),虛擬dom的實現(xiàn)等)

更新階段

點擊頁面上的文本時發(fā)生更新,這個過程包括:wathcer的觸發(fā)、patch算法對比新舊vnode,更新dom

說明

具體的可以去看源碼,在github上,覺得可以的話幫忙star一下

參考文章: Vue技術(shù)內(nèi)幕
Vue.js 源碼解析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100280.html

相關(guān)文章

  • vue2.0源碼分析之理解響應(yīng)式架構(gòu)

    摘要：分享前啰嗦我之前介紹過如何實現(xiàn)和。我們采用用最精簡的代碼，還原響應(yīng)式架構(gòu)實現(xiàn)以前寫的那篇源碼分析之如何實現(xiàn)和可以作為本次分享的參考。到現(xiàn)在為止，我們再看那張圖是不是就清楚很多了總結(jié)我非常喜歡，以上代碼為了好展示，都采用最簡單的方式呈現(xiàn)。 分享前啰嗦 我之前介紹過vue1.0如何實現(xiàn)observer和watcher。本想繼續(xù)寫下去，可是vue2.0橫空出世..所以 直接看vue2.0吧...

    chenatu 評論0 收藏0

  • 淺談Vue.use

    摘要：并且接收的參數(shù)的限制是兩種類型。對于這兩種類型有不同的處理。之后給這個插件添加至已經(jīng)添加過的插件數(shù)組中，標(biāo)示已經(jīng)注冊過最后返回對象。還有一種則是將所有邏輯都編寫成一個函數(shù)暴露給。個人覺得第一種方式比較合理。 先舉個? 我們先來看一個簡單的事例首先我使用官方腳手架新建一個項目vue init webpack vue-demo然后我創(chuàng)建兩個文件index.js plugins.js.我將這...

    MingjunYang 評論0 收藏0

  • vue 源碼自問自答-響應(yīng)式原理

    摘要：源碼自問自答響應(yīng)式原理最近看了源碼和源碼分析類的文章感覺明白了很多，但是仔細(xì)想想?yún)s說不出個所以然。會在對象的這個被獲取時觸發(fā)，會在這個對象的被修改時觸發(fā)。在初始化時，將對象上的所有，都包裝成擁有和的屬性。 vue 源碼自問自答-響應(yīng)式原理 最近看了 Vue 源碼和源碼分析類的文章,感覺明白了很多，但是仔細(xì)想想?yún)s說不出個所以然。 所以打算把自己掌握的知識，試著組織成自己的語言表達(dá)出來 不...

    ityouknow 評論0 收藏0

  • vue源碼構(gòu)建代碼分析

    這是xue源碼學(xué)習(xí)記錄，如有錯誤請指出，謝謝！相互學(xué)習(xí)相互進(jìn)步。 vue源碼目錄為 vue ├── src #vue源碼 ├── flow #flow定義的數(shù)據(jù)類型庫（vue通過flow來檢測數(shù)據(jù)類型是否正確） ├── examples #demo ├── scripts #vue構(gòu)建命令 ├── ... vue內(nèi)部代碼模...

    RyanHoo 評論0 收藏0

  • Vue的computed和watch的細(xì)節(jié)全面分析

    摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應(yīng)的作為計算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當(dāng)前 1.computed 1.1 定義 是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進(jìn)行處理 1.2 get用法 data: { ...

    lastSeries 評論0 收藏0

發(fā)表評論

0條評論

cod7ce

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<