vue2源碼教程學習

『壹』 Vue基礎篇

內容簡介：
1）Vue指令
2）computed和watch
3）生命周期鉤子
4）組件間的傳參
5）插槽
6）修飾符
7）nextTick()

前端三大框架：
Vue：尤雨溪開發
React：Facebook主導開發
Angular：谷歌主導開發

為什麼選擇Vue?
1.國內Vue的市場份額佔比多
2.簡單易上手，非常適合前端開發初學者學習

前置知識：
1.HTML、CSS和JS基礎
2.了解Node和npm
3.webpack（可選，vue-cli已經封裝了打包功能）

使用Vue的兩種方式：
1.直接script標簽引入vue.js文件
2.基於Node環境創建Vue項目（使用vue-cli初始化一個Vue項目）

前端框架與庫的區別
• jquery 庫 -> DOM(操作DOM) + 動畫+ ajax請求
• 框架 -> 全方位功能

一、指令
指令（Directives）是帶有 v- 前綴的特殊屬性。

插值表達式和v-text指令被直接解析為字元串；元素綁定 v-html 指令後，解析了msg 變數值裡面的html標簽，輸出真正的html元素。

v-model也可用在自定義組件上。

5.v-for（列表渲染）
使用v-for時應綁定key屬性，key屬性可以用來提升v-for渲染的效率

Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由於 JavaScript 的限制，Vue 不能檢測數組、對象的以下變化：1. 利用索引直接設置數組的某一項 2. 對象屬性的添加或刪除

二、computed和watch

三、生命周期鉤子
什麼是Vue生命周期？
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。
總共分為8個階段：創建前/後，掛載前/後，更新前/後，銷毀前/後。
1）beforeCreate
此時實例上只有一些生命周期函數和默認的事件，此時data computed watch methods上的方法和數據均不能訪問。
2）created
此時可以讀取data的值，並可以對其進行操作，把方法、計算屬性也都掛載到了實例。但是依舊不能訪問el，不能獲取到DOM元素。
在這個鉤子函數中，我們可以進行http請求，把請求到的數據儲存在data中。
3）模板編譯，把data裡面的數據和vue語法寫的模板編譯成HTML
4）beforeMount
將編譯完成的HTML掛載到對應虛擬DOM，此時還未掛載到頁面上
5）mounted
編譯好的HTML已掛載到頁面上
6）beforeUpdate和updated
數據更新時調用，通常使用計算屬性或偵聽器取而代之
7）beforeDestroy
銷毀所有觀察者、組件及事件監聽
8）destroyed
組件已經完全銷毀，組件中的數據、方法、計算屬性、過濾器等都已不可用。

四、組件間的通信
1.父子組件間的通信
父子組件通信可以總結為props向下傳遞，事件向上傳遞。

單向數據流：父級 prop 的更新會向下流動到子組件中，但反過來不行。
每個Vue實例都實現了事件介面：子組件使用 this.$emit(eventName,optionalPayload) 觸發自定義事件。父組件在使用子組件的地方直接用v-on來監聽子組件觸發的事件。

父組件通過ref直接調用子組件中的方法。
子組件調用父組件中的方法：
1）子組件中通過 this.$parent.fatherMethod() 來調用父組件的方法
2）子組件用$emit向父組件觸發一個事件，父組件監聽這個事件
3）父組件通過props把方法傳入子組件中（type: Function），在子組件里直接調用這個方法

2.兄弟組件間的通信
其中一種方法是讓父組件充當兩個子組件之間的中間件（中繼）；
另一種就是使用EventBus（事件匯流排），它允許兩個組件之間直接通信，而不需要涉及父組件：

Vue原型上的方法：

五、插槽

3）作用域插槽

使用場景：
在使用ElementUI組件庫的el-table組件時，表格的編輯和刪除操作要用到作用域插槽。因為el-table組件，就是當前組件的子組件。通過作用域插槽很容易拿到當前表格行的索引和內容，這樣就可以很方便地進行編輯、刪除的操作。v-slot指令是Vue2.6之後，作用域插槽的新語法，舊語法（slot-scope）現在還保留，但3.0之後會移除。
 
六、修飾符

2.事件修飾符
vue提倡的是在方法中只有純粹的數據邏輯，而不是去處理 DOM 事件細節，所以提供了事件修飾符用於DOM的事件處理。

3.按鍵修飾符

七、nextTick()
定義：在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。（當數據更新了，在dom中渲染後，自動執行nextTick的回調）

應用場景：需要在視圖更新之後，基於新的視圖進行操作。

『貳』 理解VUE2雙向數據綁定原理和實現

1.vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟著變化，視圖變化，數據也隨之發生改變；

2.核心：關於VUE雙向數據綁定，其核心是 Object.defineProperty()方法；

3.介紹一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，這個語法內有三個參數，分別為 obj （要定義其上屬性的對象） prop （要定義或修改的屬性） descriptor （具體的改變方法）
（2）簡單地說，就是用這個方法來定義一個值。當調用時我們使用了它裡面的get方法，當我們給這個屬性賦值時，又用到了它裡面的set方法；

這樣我們就能實現js的雙向數據綁定，也對這個方法有初步的了解 ；
這個例子實現的效果是：隨著文本框輸入文字的變化，span中會同步顯示相同的文字內容；這樣就實現了 model => view 以及 view => model 的雙向綁定。
通過添加事件監聽keyup來觸發set方法，而set再修改了訪問器屬性的同時，也修改了dom樣式，改變了span標簽內的文本。

1.實現效果
先來看一下vue雙向數據綁定是如何進行的，以便我們確定好思考方向

2.任務拆分

拆分任務可以讓我們的思路更加清晰：
（1）將vue中的data中的內容綁定到輸入文本框和文本節點中
（2）當文本框的內容改變時，vue實例中的data也同時發生改變
（3）當data中的內容發生改變時，輸入框及文本節點的內容也發生變化

3.開始任務1——綁定內容
我們先了解一下 DocuemntFragment（碎片化文檔） 這個概念，你可以把他認為一個dom節點收容器，當你創造了10個節點，當每個節點都插入到文檔當中都會引發一次瀏覽器的迴流，也就是說瀏覽器要迴流10次，十分消耗資源。
而使用碎片化文檔，也就是說我把10個節點都先放入到一個容器當中，最後我再把容器直接插入到文檔就可以了！瀏覽器只迴流了1次。
注意：還有一個很重要的特性是，如果使用appendChid方法將原dom樹中的節點添加到DocumentFragment中時，會刪除原來的節點。

舉個例子：
可以看到，我的app中有兩個子節點，一個元素節點，一個文本節點
但是，當我通過DocumentFragment 劫持數據一下後

注意：我的碎片化文檔是將子節點都劫持了過來，而我的id為app的div內已經沒有內容了。
同時要主要我while的判斷條件。判斷是否有子節點，因為我每次appendChild都把node中的第一個子節點劫持走了，node中就會少一個，直到沒有的時候，child也就變成了undefined，也就終止了循環。

來實現內容綁定
我們要考慮兩個問題，一個是如何綁定要input上，另一個是如何綁定要文本節點中。
這樣思路就來了，我們已經獲取到了div的所以子節點了，就在DocumentFragment裡面，然後對每一個節點進行處理，看是不是有跟vm實例中有關聯的內容，如果有，修改這個節點的內容。然後重新添加入DocumentFragment中。

首先，我們寫一個處理每一個節點的函數，如果有input綁定v-model屬性或者有{{ xxx }}的文本節點出現，就進行內容替換，替換為vm實例中的data中的內容

然後，在向碎片化文檔中添加節點時，每個節點都處理一下。

創建Vue的實例化函數

效果圖如下：

我們成功將內容都綁定到了輸入框與文本節點上！

4、實現任務2——【view => model
對於此任務，我們從輸入框考慮，輸入框的問題，輸入框如何改變data。我們通過事件監聽器keyup，input等，來獲取到最新的value，然後通過Object.defineProperty將獲取的最新的value，賦值給實例vm的text，我們把vm實例中的data下的text通過Object.defineProperty設置為訪問器屬性，這樣給vm.text賦值，就觸發了set。set函數的作用一個是更新data中的text，另一個等到任務三再說。

首先實現一個響應式監聽屬性的函數。一旦有賦新值就發生變化

然後，實現一個觀察者，對於一個實例 每一個屬性值都進行觀察。

改寫編譯函數，注意由於改成了訪問器屬性，訪問的方法也產生變化，同時添加了事件監聽器，把實例的text值隨時更新

實例函數中，觀察data中的所有屬性值，注意增添了observe

最終我們改變input中的內容能改變data中的數據，單頁面卻沒有刷新

4、實現任務3——【model => view】
通過修改vm實例的屬性 該改變輸入框的內容 與 文本節點的內容。
這里涉及到一個問題 需要我們注意，當我們修改輸入框，改變了vm實例的屬性，這是1對1的。
但是，我們可能在頁面中多處用到 data中的屬性，這是1對多的。也就是說，改變1個model的值可以改變多個view中的值。
這就需要我們引入一個新的知識點：

訂閱/發布者模式
訂閱發布模式（又稱觀察者模式）定義了一種一對多的關系，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。

發布者發出通知 => 主題對象收到通知並推送給訂閱者 => 訂閱者執行相應操作
1
舉個例子：

之前提到的set函數的第二個作用 就是來提醒訂閱者 進行noticy操作，告訴他們：「我的text變了！」 文本節點變成了訂閱者，接到消息後，立馬進行update操作

回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。
在監聽數據的過程中，我們會為 data 中的每一個屬性生成一個主題對象 dep。

在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 容器中。

我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。

接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。
這里的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。

注意： 我把直接賦值的操作改為了 添加一個 Watcher 訂閱者

那麼，Watcher又該做些什麼呢？

首先，將自己賦給了一個全局變數 Dep.target；

其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；

再次，獲取屬性的值，然後更新視圖。

最後，將 Dep.target 設為空。因為它是全局變數，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。

最終我們就實現了這個雙向數據綁定功能，雖然很繁瑣，但我相信，你多打幾遍，一定會對你有所幫助，加油吧!!

『叄』 vue2響應式原理總結

vue組件實例化時，會對data屬性深度遍歷（遇到數組或者對象）為每一個屬性添加數據劫持。數據劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法。
在這個過程中會實例化一個Dep類。
1.在get攔截器里觸發dep實例的depend方法,進行依賴收集，實質是在dep的實例屬性sub數組中添加依賴這個屬性的watcher實例。
2.在set攔截器里觸發dep實例的notify方法，對收集到的所有依賴派發更新，（watcher的update方法）

vue組件實例化時會實例化一個渲染watcher,渲染watcher實例化過程會做兩件事情。
1.創建vnode,在這個過程中，訪問了data屬性，觸發了get方法，完成了依賴收集。
2.觸發了子組件的實例化，子組件實例化又會重復上述數據劫持的過程。
這個過程就是對組件樹的深度遍歷。

結合組件生命周期來看整個過程，父組件會先觸發created鉤子，子組件後觸發created鉤子。而子組件mouted鉤子會先執行，父組件的mouted鉤子後執行。

分步驟記憶
1、實現頁面不刷新的原理
2、頁面視圖刷新的原理

實現頁面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 運行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

1.hash(哈希模式)，#符號後邊是瀏覽器行為，在改變的時候不對頁面進行刷新（重新請求URL）（監聽hashChange事件）
2.history模式，H5新增了pushState，replaceState連個新API,可以修改歷史記錄卻不會使瀏覽器刷新頁面。

視圖更新原理
其原理就是vue的響應式更新dom的原理，m => v
m是數據，也就是在vue-router install時在根組件（root vue component）添加了_route屬性，在匹配到對應路由後更新了_route屬性值，繼而觸發了該屬性值的渲染watcher,在繼而觸發dom更新。

兩種模式的不同
1.部署時，history模式需要服務端處理所有可能的路徑（例如配置nginx的配置文件），防止出現404。哈希模式則不需要。
2.URL表示不同。

v-model指令就是 v-bind:value 和 @input 的語法糖。
它即可以支持原生表單元素，也可以支持自定義組件
在自定義組件中其實際是這樣的：

它的實現通過自定義render函數, 緩存了 vnode

Vue 在更新 DOM 時是非同步執行的，只要偵聽到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據變更。

如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。在緩沖時會去除重復數據避免不必要的計算和 DOM 操作。

$nextTick(cb) 目的是在DOM 更新完成後傳入的回調函數再被調用。

『肆』 vue怎麼學習（網營作業）

Vue基礎部分
第一章：內部指令
1.v-if v-else v-show
2.v-for指令 ：解決模板循環問題
3.v-text & v-html
4.v-on：綁定事件監聽器
5.v-model指令
6.v-bind 指令
7.v-pre & v-cloak & v-once
第二章：全局API
1.Vue.directive 自定義指令
2.Vue.extend構造器的延伸
3.Vue.set全局操作
4.Vue的生命周期（鉤子函數）
5.Template 製作模版
6.Component 初識組件
7.Component 組件props 屬性設置
8.Component 父子組件關系
第三章：選項
1.propsData Option 全局擴展的數據傳遞
2.computed Option 計算選項
3.Methods Option 方法選項
4.Watch 選項 監控數據
5.Mixins 混入選項操作
6.Extends Option 擴展選項
第四章：實例和內置組件
1.實例入門-實例屬性
2.實例方法
3.實例事件
4.內置組件 -slot講解
Vue全家桶部分
第五章：Vue-cli
1.Vue-cli安裝和初始化
2.Vue-cli項目結構講解
3.解讀Vue-cli的模板
第六章：Vue-router
1.Vue-router入門
2.vue-router配置子路由
3.vue-router如何參數傳遞
4.單頁面多路由區域操作
5.vue-router 利用url傳遞參數
6.vue-router 的重定向-redirect
7.alias別名的使用
8.路由的過渡動畫
9.mode的設置和404頁面的處理
10.路由中的鉤子
11.編程式導航
第七章：Vuex
1.初出茅廬 來個小Demo
2.state訪問狀態對象
3.Mutations修改狀態
4.getters計算過濾操作
5.actions非同步修改狀態
6.mole模塊組

『伍』 vue基礎知識簡述(v-if&v-for&v-show&v-model)

條件渲染主要有兩個指令：v-if v-show
   有v-if 相應會有 v-else v-else-if
      v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回truthy值的時候被渲染

v-if為true的表達式會顯示
v-if為false的表達式不會顯示

示例需要用到的data部分：

利用data變數進行判斷使用

類似於if-else條件語句判斷

在template上使用 v-if 條件渲染分組

利用上面提供的data變數和下面的template結合，啟動網頁後查看源碼可知
v-show與v-if區別：
  v-show 只是簡單的切換元素的display CSS propertity,帶有 v-show 元素始終會被渲染並保存在 dom 中
    v-if:後面若為false，標簽直接消失，控制dom元素的創建和銷毀
      v-if是一個編譯、卸載的過程，創建和銷毀子組件
          v-show是控制css property

v-for用於循環遍歷數據
 示例需要用到的data部分：

用v-for把一個數組映射為一組元素
  v-for基於一個數組來渲染一個列表
   v-for使用數組，item代表數組中每個元素，index表示數組元素下標

兩種分隔符：in of
  item標識鍵值，key表示鍵名，index表示索引

注意觀察上面循環標簽的最後都有 :key
 為什麼要添加key?
  key作為唯一標識
   為了給vue一個提示，以便它能跟蹤每一個節點的身份，重而重用和重新排序現有元素

官方解釋：
你可以用v-model 指令在表單＜input> 、 <textarea＞及<select＞元素上創建雙向數據綁定。它會根據控制項類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model本質上不過是語法糖。它負責監聽用戶的輸入事件來更新數據，並在某種極端場景下進行一些特殊處理。
v-model會 忽略所有表單元素的value 、checked 、 selected attribute 的初始值。 它將始終將當前活動實例的數據作為數據來源。你應該通過JavaScript在組件的 data選項中聲明初始值。

v-bind （:value="msg"）負責將data變數顯示頁面input框
v-on (@input="changeValue) 負責利用函數中事件對象獲取頁面input框的值傳data變數使其發生改變

缺陷：v-model數據中每一次改變都會觸發試圖更新，特別消耗性能
因此官方為v-model設定了一些修飾符

lazy ,當輸入框失去焦點,再去同步輸入框中的數據

trim:自動過濾用戶輸入的首尾空白字元

如果想自動將用戶的輸入值轉為數值類型，可以給v-model添加number修飾符

『陸』 10《Vue 入門教程》Vue 雙向綁定指令

本小節我們將介紹 Vue 中數據的雙向綁定指令 v-model 。 v-model 的學習相對簡單。我們可以用 v-model 指令在表單 、 及 元素上創建雙向數據綁定。它會根據控制項類型自動選取正確的方法來更新元素。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

2. 木子解釋

用 v-model 指令在表單 、 及 元素上創建雙向數據綁定。它會根據控制項類型自動選取正確的方法來更新元素。v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。— 官方定義

v-model 是 vue 提供的用來對表單控制項做數據雙向綁定的指令。它可以根據用戶的輸入動態改變其綁定的值，同樣可以根據綁定值的改變來操作頁面 DOM 的更新。

3. 基本用法

接下來我們將詳細介紹 v-model 在不同表單元素上的使用。

3.1 單行文本 input

實例演示

Document

名稱是: {{ name }}

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給輸入框 input 和 name 形成雙向綁定，當 input 中數據發生改變時 name 也會發生改變。同理，我們在控制台通過 vm.name = "" 給 name 賦值時輸入框的內容也會發生改變。

3.2 多行文本 textarea

實例演示

Document

描述是: {{ desc }}

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給輸入框 textarea 和 desc 形成雙向綁定，當 textarea 中數據發生改變時 desc 也會發生改變。同理，我們在控制台通過 vm.desc = "" 給 desc 賦值時輸入框的內容也會發生改變。

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給單個選擇框 checkbox 和 isDelivery 形成雙向綁定，當 checkbox 改變選中狀態時 isDelivery 也會發生改變。同理，我們在控制台通過 vm.isDelivery = true 給 isDelivery 賦值時 checkbox 的選中狀態也會發生改變。

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給多個選擇框 checkbox 和 types 形成雙向綁定，當任意 checkbox 改變選中狀態時 types 也會發生改變。同理，我們在控制台通過 vm.types = [] 給 types 賦值時對應 checkbox 的選中狀態也會發生改變。

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給單選按鈕 radio 和 isFree 形成雙向綁定，當 radio 改變選中狀態時 isFree 也會發生改變。同理，我們在控制台通過 vm.isFree = 0 給 isFree 賦值時 radio 的選中狀態也會發生改變。

實例演示

"運行案例" 可查看在線運行效果

代碼解釋： 上述代碼，我們通過 v-model 給選擇框 select 和 company 形成雙向綁定，當 select 改變選項時 company 也會發生改變。同理，我們在控制台通過 vm.company = 0 給 company 賦值時 select 的選中項也會發生改變。

對於單選按鈕、復選框及選擇框的選項，v-model 綁定的值通常是靜態字元串 （對於復選框也可以是布爾值）：

但是有時我們可能想把值綁定到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字元串。

代碼解釋： 上述代碼中，我們通過 true-value 和 false-value 給 復選框指定來選中和非選中的值，當選中時 vm.isDelivery === 'yes' ，當沒有選中時 vm.isDelivery === 'no'

代碼解釋： 上述代碼中，我們通過 v-bind:value 給 randio 指定選中的值，當 radio 選中時 vm.pick === vm.a 。

代碼解釋： 上述代碼中，我們通過 v-bind:value 給 option 指定 value 值，當 該 option 選中時 vm.selected 的值為 { number: 123 } 。

在默認情況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 （除了上述輸入法組合文字時）。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：

如果要自動過濾用戶輸入的首尾空白字元，可以給 v-model 添加 trim 修飾符：

本小節我們介紹了 Vue 數據雙向綁定 v-model 的使用，主要包括以下知識點：

『柒』 Vue移動端項目搭建: 手把手從零開始搭建

為什麼要寫這篇文章?

安裝lib-flexible

引入lib-flexible

安裝px2rem-loader

配置px2rem-loader

項目里使用設計稿標注的px，編譯或者打包後會自動轉化為rem

在Vue-cli中使用lang="less"時報錯： Mole build failed: TypeError: this.getOptions is not a function at Object.loader
出現這個問題的原因是less-loader版本過高，降級到5.0.0即可

main.js添加

main.js

router/index.js

src文件夾下新建http文件夾，並在文件夾內新建request.js
request.js

main.js

使用方法:
然後就可以在項目中以 this.$axios 來進行請求

static文件夾下新增config.js

使用

(1) router/index.js

給每個路由新增一個auth欄位來判斷是否需要登錄

(2) main.js

移動端項目調式怎麼可以少了這個神器.

static 文件夾下新建 vconsole.js ，
再去git上拷貝源碼下來,在 index.html 里引入, vconsole 地址： 點這里

index.html

main.js

App.vue

谷歌下不支持小於12px，當字體小於12px時 會變成12px 這個時候我們設置的rem及=就沒有效果了 設置text-size-adjust會解決這個問題 禁用Webkit內核瀏覽器的文字大小調整功能

src / components 下新建index.js

main.js

使用: 直接使用不需要import

main.js中路由的前置守衛里添加這句：

本模板框架gitee地址： https://gitee.com/apple0515/vue_h5_project

持續更新~~

『捌』 如何閱讀Vuejs源碼，學習筆記

1. # 下載最新的vue$ npm install vue

2. js 引用 vue.js

3. 開始代碼，感受vue強大的雙向數據綁定

1234567891011<divid="app"><p>{{message}}</p><inputv-model="message"></div>newVue({el:'#app',data:{message:'HelloVue.js!'}})

實戰代碼：

<divid="app"><inputv-model="newTodo"v-on:keyup.enter="addTodo"><ul><liv-for="todointodos"><span>{{todo.text}}</span><buttonv-on:click="removeTodo($index)">X</button></li></ul></div>newVue({el:'#app',data:{newTodo:'',todos:[{text:'Addsometodos'}]},methods:{addTodo:function(){vartext=this.newTodo.trim()if(text){this.todos.push({text:text})this.newTodo=''}},removeTodo:function(index){this.todos.splice(index,1)}}})

Vue整個生命周期示意圖：

『玖』 面試中的網紅Vue源碼解析之虛擬DOM，你知多少呢深入解讀diff演算法

眾所周知，在前端的面試中，面試官非常愛考dom和diff演算法。比如，可能會出現在以下場景

滴滴滴，面試官發來一個面試邀請。接受邀請📞

我們都知道， key 的作用在前端的面試是一道很普遍的題目，但是呢，很多時候我們都只浮於知識的表面，而沒有去深挖其原理所在，這個時候我們的競爭力就在這被拉下了。所以呢，深入學習原理對於提升自身的核心競爭力是一個必不可少的過程。

在接下來的這篇文章中，我們將講解面試中很愛考的虛擬DOM以及其背後的diff演算法。 請認真閱讀本文～文末有學習資源免費共享！！！

虛擬DOM是用JavaScript對象描述DOM的層次結構。DOM中的一切屬性都在虛擬DOM中有對應的屬性。本質上是JS 和 DOM 之間的一個映射緩存。

要點：虛擬 DOM 是 JS 對象；虛擬 DOM 是對真實 DOM 的描述。

diff發生在虛擬DOM上。diff演算法是在新虛擬DOM和老虛擬DOM進行diff（精細化比對），實現最小量更新，最後反映到真正的DOM上。

我們前面知道diff演算法發生在虛擬DOM上，而虛擬DOM是如何實現的呢？實際上虛擬DOM是有一個個虛擬節點組成。

h函數用來產生虛擬節點（vnode）。虛擬節點有如下的屬性：
1）sel： 標簽類型，例如 p、div；
2）data： 標簽上的數據，例如 style、class、data-*；
3）children ：子節點；
4） text： 文本內容；
5）elm：虛擬節點綁定的真實 DOM 節點；

通過h函數的嵌套，從而得到虛擬DOM樹。

我們編寫了一個低配版的h函數，必須傳入3個參數，重載較弱。

形態1：h('div', {}, '文字')
形態2：h('div', {}, [])
形態3：h('div', {}, h())

首先定義vnode節點，實際上就是把傳入的參數合成對象返回。

[圖片上傳失敗...(image-7a9966-1624019394657)]
然後編寫h函數，根據第三個參數的不同進行不同的響應。

當我們進行比較的過程中，我們採用的4種命中查找策略：
1）新前與舊前：命中則指針同時往後移動。
2）新後與舊後：命中則指針同時往前移動。
3）新後與舊前：命中則涉及節點移動，那麼新後指向的節點，移到 舊後之後 。
4）新前與舊後：命中則涉及節點移動，那麼新前指向的節點，移到 舊前之前 。

命中上述4種一種就不在命中判斷了，如果沒有命中，就需要循環來尋找，移動到舊前之前。直到while(新前<=新後&&舊前<=就後)不成立則完成。

如果是新節點先循環完畢，如果老節點中還有剩餘節點(舊前和舊後指針中間的節點)，說明他們是要被刪除的節點。

如果是舊節點先循環完畢，說明新節點中有要插入的節點。

1.什麼是Virtual DOM 和Snabbdom
2.手寫底層源碼h函數
3.感受Vue核心演算法之diff演算法
4.snabbdom之核心h函數的工作原理

1、零基礎入門或者有一定基礎的同學、大中院校學生
2、在職從事相關工作1-2年以及打算轉行前端的朋友
3、對前端開發有興趣人群

『拾』 vue入門 | 使用vue.js2.0 + ElementUI開發後台管理系統詳細教程（一）

項目首頁由頂部導航欄，左側導航欄，中間內容區構成，如圖

在app.vue引入element-ui，然後就可以在其他任何頁面中使用了

將app.vue改為以下內容