今日心血來潮，重新梳理下Vue的基礎知識

一. 基礎認識：

1. data
   Vue例項中的資料例項物件，負責儲存例項資料

2. methods
   Vue例項中的例項方法物件,負責處理例項的邏輯操作

通過以上兩個基礎例項物件，引出下方三個例項物件

3. watch
   檢測data中的特定的值，如果該值發生改變，就會觸發watch中對應該值的函式(只可以對data中的值進行改變)

4. 計算屬性(computed)
   本質上是一個屬性！，負責對data中要顯示的值進行復雜邏輯操作.m,,，由於其本質是個屬性，為了與methods，filters，進行區分，推薦函式名為名詞開頭
   當且僅當計算屬性依賴的data改變時才會自動計算

模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護...對於任何複雜邏輯，你都應當使用計算屬性 --vue.org

5. 過濾器（filters）
   用於一些常見的文字格式化，通常用於對後臺回顯的一些資料進行格式化變得通俗

二：中階認知
1.data
在SPA中data必須要返回一個函式的原因：
如果是不使用函式而使用物件 ，假如多次呼叫data中的值會導致data中指向堆記憶體中相同的記憶體空間，從而導致在頁面中顯示的值是相同的，此時多次呼叫data中的資料本質上是多次指向了data物件的同一塊記憶體地址
如果使用的是物件返回函式，則每次呼叫data中的值本質上是在堆記憶體中多次開闢了不同的記憶體空間，從而每次呼叫都會返回一個新的物件，從而保證了資料的絕對獨立性

PS:閉包的本質也與此類似。
2.methods
methods本身有一個預設引數為$event，這個是觸發dom的事件物件引數

3. watch
   可以監控一個值的變換，並呼叫因為變化需要執行的方法
   有一個handle函式預設就是要watch方法
   請注意！
   1.當值第一次繫結的時候，不會執行監聽函式，只有值發生改變才會執行,如果需要第一次繫結就觸發該watch函式，可以給給該watch函式新增immediate屬性並賦為true
   2.如果想要監聽的是data中的一個obj型別的一個屬性，則需要給該watch函式新增deep屬性並賦值為true，（這樣會導致watch監聽data下的整個該obj物件），如果僅期待監聽該物件下的demos值，可以將該函式名從data中的obj變成，賦值為字串格式

data(){
   return {
       objDemo:{
         demos:11
      }
   }    
}
watch:{
// 原本為objDemo,現在改成'objDemo.demos'
	'objDemo.demos':{
		handler:(nVal)=>{
			console.log(newValue.id);
		},
                immediate:true // 為true表示第一次繫結值就觸發該函式
		deep:true //深度監聽
	}
}

4. 計算屬性(computed)
   每一個computed有兩個函式，getter函式是用於展示處理後的值，setter函式用於修改原值--換句話說，getter函式不改變值本身，而是在原值的基礎上返回經過加工後的，包含該值的內容，而setter函式則是修改了原值本身，假設使用者修改了原值，則可以在set函式內對原資料進行操作，由於要修改原值，所以setter函式接收原值為引數。
   5.過濾器
   1.多重管道符
   可以給一個數據新增多個過濾器，中間以管道符隔開，

<p>{{這是一個 | filter1 | filter2}}</p>

請注意！從左到右，右邊的filter接收的永遠都是從data資料到左邊所有filter的值
2. 可以在v:bind中使用

三: 重要區別

1. 計算屬性(computed) 與 過濾器(filter)
   相同點：
   1.對data中顯示的值進行處理後顯示
   2.都必須有返回值

例：頁面中應回顯的的是金錢數量，同時應附帶金錢符號，而後臺返回的僅有金錢數量，此時可以通過使用components或者filter對返回資料進行加工從而達到回顯效果

區別：
computed：
依賴於一個固定的vue例項 ，在某一個例項中使用；
不接受額外引數，依賴於data屬性中的變數(get)
有快取管理機制，可減少頁面呼叫次數
計算屬性雖預設為只讀，但可以定義為物件，開啟可讀可寫模式
計算屬性被作為一個類屬性呼叫
filter:
不依賴於例項。定義一個全域性過濾器，在多個例項中使用
不要求是data中的變數，可以是臨時變數。可接受額外引數
無快取機制，呼叫次數，取決於頁面中有所多少過濾器
只能讀取操作
過濾器被作為一個特殊方法處理
2. 計算屬性(computed) 與watch
相同點：
都可以改變頁面顯示的值
區別：
computed：
宣告式的描述一個值與其他值的依賴關係，如果這個值發生改變，該計算屬性也會發生改變，本質上是一個屬性
watch:
通過監聽某個值的狀態的變化動態的進行操作，本質上是一個函式
> PS: 如果可選，更推薦使用computed，這是由於computed的快取能力，並不會重複渲染相同的值
3. 計算屬性(computed)與方法(methods)
相同點：
都可以改變頁面顯示的值
不同點：
computed：只有在值發生變化時才會觸發， 同時會快取該值(原理基於diff演算法)(值呼叫)
methods: 觸發後不會對值進行快取，這樣則造成每次觸發時都會執行一次，對於效能開銷會相當大（方法呼叫）

4. created 與 mounted的區別
   相同點：
   在本生命週期裡都可以發起網路請求
   在本生命週期裡都可以操作data和methods
   不同點：
   created：
   在本生命週期內，dom並未渲染出來，此時進行dom相關操作必定會報錯
   如果期待請求資料快一些，可以在該生命週期內進行
   可以操作data資料和methods內的函式
   mounted:
   在本生命週期內，dom已渲染完成，可以對dom進行相關操作
   請注意！ mounted並不承諾完成對所有子元件的載入，為確保萬一，可以在本週期內使用$nextTick進行元件載入

5. $nextTick，watch,mounted三者異同

   未整理好，待續

PS: 本篇文章大多為摘抄，由於參考文章太多導致無法將原文連結附帶，如果有作者看到麻煩請留言，筆者看到一定會增添，萬分抱歉！

以上。