国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用console.log分析Vue源碼

cod7ce / 2346人閱讀

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

前言

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

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

下載vue.js文件,在vue-console.html中引入,我寫了一個(gè)簡單的例子,涵蓋:初始化視圖->點(diǎn)擊后更新視圖(包括各個(gè)鉤子函數(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代表對(duì)象輸出


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


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

項(xiàng)目過程

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

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

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

初始化階段

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

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

掛載階段 

  
{{name}}

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

更新階段

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

說明

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

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

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

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

相關(guān)文章

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

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

    chenatu 評(píng)論0 收藏0

  • 淺談Vue.use

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

    MingjunYang 評(píng)論0 收藏0

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

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

    ityouknow 評(píng)論0 收藏0

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

    這是xue源碼學(xué)習(xí)記錄，如有錯(cuò)誤請指出，謝謝！相互學(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 評(píng)論0 收藏0

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

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

    lastSeries 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

cod7ce

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<