vue-day01&day02----vue漸進式MVVM框架、new操做符作了哪些事、指令、事件修飾符、瀏覽器按下回車後發生了什麼、瀏覽器渲染頁面的流程、虛擬DOM的特色、迴流和重繪、compute

# day01

### vue基礎

    vue是一個漸進式的JavaScript框架，是一個MVVM框架。

    M：數據層

    V：視圖層

    VM：映射層

    vue的特色：經過數據去操做視圖

    底層原理：Object.defineProperty()（ES5，不支持IE8）   vue3.0是使用new Proxy()（ES6，不支持IE11）

        寫在data中的數據會自動添加數據劫持，當修改時會觸發watch監聽，以此作數據監聽。

    由於Vue是一個構造函數，因此使用vue的時候要經過new的方式進行使用，Vue這個構造函數的參數是一個配置項options。

        let vm=new Vue({    

            el:"#app",

            data:{

                msg:"賞一碗蝙蝠湯"

            }

        });

    Question：new操做符作了哪些事？ 

        一、開闢一塊內存空間

        二、將this指向這塊內存空間

        三、將構造函數上面的屬性和方法添加到實例對象身上

　　 四、return this

    

### 指令

    v-text：

        做用：用來渲染數據和執行一些js語法

        底層是innerText

        簡寫：{{}}

        v-test在加載的時候，若是vue.js還未加載進來，頁面不會出現{{}}，而使用簡寫方式就會出現{{}}。

    v-html：

        做用：用來渲染數據和執行一些js語句

        能夠用來解析html標籤

        簡寫：{{{}}}    僅限於vue1.0，因此不用了

    v-if：

        經過建立和刪除元素來控制元素的顯示和隱藏

        值：true----顯示，false----隱藏

        能夠和v-else-if、v-else連用

    v-show：

        經過display來控制元素的顯示和隱藏

    v-if和v-show的區別：

        一、v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。所以，若是須要頻繁地切換，則使用v-show，若是在運行時條件不多改變，則使用v-if

        二、使用場景：

            頻繁切換的時候用v-show，例如選項卡

            登陸與非登陸頁面，vip與非vip，權限頁面用v-if

        三、v-for不能和v-if一塊兒使用，v-for的優先級更高，v-for和v-show一塊兒使用

    v-for：

        遍歷數組、對象、字符串、數字

        語法：v-for="(item,index) in 須要遍歷的數據" 

    v-bind：

        做用：用來給元素綁定屬性

            href

            src

            title

            class

            style

            自定義屬性

        語法：v-bind:屬性="值"

        簡寫：:屬性="值"

    v-on：

        綁定事件

        簡寫：@事件名稱="事件函數"

        關於事件對象：

            默認狀況下若是事件函數不須要傳遞參數的時候能夠不加()，而後在methods中的函數裏經過參數e來獲取到事件對象。

            默認參數是事件對象，不傳參時，參數默認爲e；

            若是有其餘參數，事件對象e須要經過$event手動傳遞。

    v-pre：

        解析{{}}    讓{{}}再也不去解析數據

    v-cloak：

        防止vue.js沒有加載進來的時候，頁面顯示{{}}

    v-once：

        只渲染一次數據

    v-model：

        雙數據綁定

        流程：當輸入框的數據發生改變時會修改data中相對應的數據，當data中數據發生改變，視圖會跟着發生改變。

        使用場景：只能在表單元素中進行使用

### 事件修飾符

    做用：輔助一些事件，阻止事件冒泡，阻止瀏覽器默認事件等

    語法：@事件名稱.修飾符.修飾符.修飾符...="事件函數"（一個事件後面能夠跟多個修飾符）

    常見的修飾符：

        .stop：阻止事件冒泡

        .prevent：阻止瀏覽器默認行爲

        .once：事件只觸發一次

        .enter：回車鍵觸發，也能夠寫 .13

### Question

    一、瀏覽器按下回車後發生了什麼

        ①DNS解析，瀏覽器會先去本地的hosts文件中找有沒有和地址欄域名對應的IP，若是有直接打開，若是沒有就會發送DNS請求到DNS服務器。

        ②拿到對應的IP後，瀏覽器經過三次握手創建TCP/IP聯繫後，發送http請求，進行網絡通訊，瀏覽器從應用層到傳輸層（TCP）、到網絡層（IP）、到鏈路層（網絡）、客戶端發送請求的階段結束。

        ③服務器接收到客戶端的http請求後，查找客戶端請求的資源，而後再從鏈路層到網絡層、到傳輸層、到應用層，將響應的報文返回，經過四次揮手斷開TCP/Ip鏈接。

        ④瀏覽器收到html、css、js等文件後，解析html構建DOM樹，構建render樹、佈局render樹、繪製render樹、而後解析css文件構建渲染樹，這個過程完成後，瀏覽器開始佈局渲染樹並將其繪製到頁面中。

        注意：在首次加載的時候會經歷迴流和重繪，速度較慢。js的加載能夠當作是這個同步的主線程上的一個任務隊列。有的網頁頁面很大，能夠用預加載和懶加載提高用戶體驗。

    二、瀏覽器渲染頁面的流程

        ①解析html，構建DOM

        ②解析css，構建CSSOM

        ③js腳本加載

        ④將DOM和CSSOM組合生成Render Tree（渲染樹）

        ⑤遍歷渲染樹，將渲染樹上每一個節點進行頁面的迴流與重繪，生成頁面

        注意：上述過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完纔去構建和佈局render樹，它是解析一部分就顯示一部分，同時，可能還在經過網絡下載其他內容。

    三、虛擬DOM特色

        什麼是虛擬DOM：它就是內存中的一個變量，是一個對象結構

        前端效率優化：最致命的問題就是DOM操做，儘可能減小DOM操做

        vue的高效：

            ①虛擬DOM頁面渲染高效

            ②js     獲取數據，根據數據渲染界面DOM   vue將開發者的精力從DOM操做上轉移到了數據操做上，數據變頁面變

    四、迴流和重繪

        迴流：渲染樹中的一部分或者所有元素由於尺寸、佈局、隱藏等改變而須要從新構建。迴流至少會發生一次，也就是第一次加載的時候。

        重繪：在迴流時，瀏覽器會使渲染樹中受影響的元素部分失效，並從新繪製這個部分的渲染樹，完成迴流後，瀏覽器從新繪製收到影響的元素到頁面中。background-color

        區別：迴流必定會發生重繪，重繪不必定會發生迴流。

    五、diff算法

# day02

### computed

    經過屬性計算得來的屬性

    注意：

        一、computed內部的函數能夠隨意編寫

        二、computed內部的函數必須經過return的方式返回出去，最好不要在computed內部進行賦值操做

        三、雖然computed內部是以函數的方式進行編寫，可是在調用的時候並非一個函數，因此不須要加()

        四、只要函數內部所依賴的屬性發生了改變，那麼這個函數就會本身調用

        五、當函數內部所依賴的屬性沒有發生改變的時候computed會從緩存中讀取結果

    總結：computed中的方法都是依賴vue中的屬性，若是屬性發生了改變那麼computed中的對應的函數就會去執行。

    使用的場景：當多個屬性影響一個屬性的時候就須要用到computed----購物車

### vue實例身上的方法   

    $on()：事件綁定

        參數：

            參數一：事件名稱

            參數二：事件函數

    $emit()：事件觸發

        參數：

            參數一：事件名稱

            參數二：須要傳遞的參數（選填）

    $off()：事件解綁

        參數：

            參數一：事件名稱

            參數二：須要解綁的事件函數（選填）

    $once()：事件綁定，只觸發一次

        參數：

            參數一：事件名稱

            參數二：事件函數

    $mount()：外部設置掛載點

    $forceUpdate()：強制更新（耗費性能，通常不用）

    $nextTick()：獲取數據更新後最新的DOM結構

    $destroy()：卸載    斷開vue與實例之間的聯繫

    $set()：

        做用：給一個響應式對象添加一個響應式屬性或者給響應式對象設置屬性

        語法：$set(object,key/index,value);

    $delete()：

        做用：刪除響應式對象的某一個值

        語法：$delete(object,key/index);

### watch監聽

    做用：監聽data中屬性的變化

    當data中的屬性發生了變化，那麼watch中相對應的函數就會執行

    注意：

        一、watch中的函數名稱必須是所依賴data中的屬性名稱

        二、watch中的函數是不須要調用的，只要函數所依賴的屬性發生了變化，那麼相對應的函數就會執行

        三、watch中的函數有兩個參數：newVlaue，oldValue

        四、watch默認狀況下沒法監聽對象的改變，若是須要進行監聽則須要進行深度監聽，由於它只會監聽對象的地址是否發生了改變，不會監聽值的改變。

            深度監聽的兩種方法：

                ①"obj.name"(newVlaue,oldValue){

                }

                ②obj:{

                    handler(newValue){

                    },

                    deep:true

                }

        五、watch默認狀況下第一次的時候不會去作監聽，若是須要第一次加載的時候就監聽須要設置immediate:true

        六、watch在特殊狀況下是沒法監聽到數組的變化：

            ①經過下標來更改數組中的數據

            ②經過length來改變數組的長度

        對應的解決辦法：

            ①經過vue實例方法$set()進行設置

            ②經過splice來進行數組清空

### 生命週期

    什麼是生命週期：

        也叫生命週期鉤子函數

        在相對應的階段作相對應的事情

    vue有本身的生命週期：

        beforeCreate()

            當前生命週期是vue初始化的時候執行的鉤子函數，在這個函數裏面data和methods都尚未將自身的屬性和方法代理到vue的實例身上，所以在當前生命週期中是訪問不到data中的屬性和methods中的方法的。

            當前生命週期函數的執行的時候組件還未進行建立，所以咱們能夠在當前組件中進行loading的顯示

        *created()

            一、由於當前生命週期函數是組件建立後執行的，因此咱們能夠在當前生命週期中進行數據的請求（ajax）

            二、當前生命週期在執行的時候會將data身上全部的屬性進行數據劫持，給每一個屬性添加setter和getter方法

            三、當前生命週期在執行的時候會將data身上全部的屬性和methods身上全部的方法添加到vue的實例身上

        beforeMount()

            當前生命週期是組件掛載到頁面以前執行的鉤子函數，咱們能夠在當前生命週期函數中對數據進行最後的更改

            當前生命週期數據和模板還未結合，所以訪問不到真實的DOM結構

        *mounted()

            當前生命週期是組件掛載到頁面以前會執行的鉤子函數，咱們能夠在當前生命週期函數中訪問到真是的DOM結構

            當前生命週期函數中數據和模板已經進行告終合，能夠經過this.$refs來訪問到真是的DOM結構

            場景：在當前生命週期函數中進行方法的初始化（Swiper better-scroll echarts）

        beforeUpdate()

            當前生命週期函數中咱們能夠訪問到真實的DOM結構

            當前生命週期函數中咱們能夠對更新的數據作最後的更改

            當前生命週期函數中更新的數據還未和模板進行結合

            同時也能夠進行更新數據的檢測

        uodated()

            當前生命週期函數中數據和模板進行進行結合，咱們能夠在當前生命週期函數中獲取到數據更新後最新的DOM結構

            若是咱們在當前生命週期函數中進行實例化操做，必定要進行邊界判斷，不然會形成無用的性能消耗，不建議在這裏實例化。

            邊界判斷：

                if(!this.swiper){

                    this.swiper=new Swiper();

                }

        *beforeDestroy()

            當前生命週期函數會在組件被銷燬的時候去執行，咱們能夠在當前生命週期函數中進行事件的解綁，定時器的清除

            咱們在當前生命週期中仍能夠獲取到真實的DOM結構

        destroyed()

            在當前生命週期函數中咱們訪問不到真實的DOM結構，以及當前生命週期會斷開與vue的關聯

### ref

    語法：

        一、給須要獲取真實的DOM結構的元素添加ref屬性，例如 <p ref="p"></p>   這個名字必須是惟一的

        二、經過this.$refs.p能夠獲取到真實的DOM結構

### 組件

    一、什麼是組件：

        頁面上任何一個部分都是一個組件，多個組件組成一個模塊

    二、組件的特色：

        複用性強，便於維護

    三、組件的組成部分：

        html    css     js

    

    四、如何建立一個組件：

        全局組件：

            語法：

                Vue.component("組件名稱",組件配置項)

        局部組件：

            new Vue({

                components:{

                    組件名稱:組件配置項

                }

            })

        注意：

            一、全局組件必需要在實例化以前

            二、組件的配置項和vue的配置項如出一轍，惟一的不一樣點是vue的data是一個對象，組件的data是一個函數return一個對象