最近我在收看唐金州在極客時間發布的《vue從入門到精通》，頗有收獲。
唐金州，一點資訊前端技術專家，曾在螞蟻金服就職，也是開源組件庫ant design vue的作者，雖然唐老師寫的ant design vue有一些瑕疵，但不得不承認，能以一己之力擼完一個UI框架，是真的強，而他本人對於vue的理解也到很深的境界，於是我特做此視頻筆記，較為零散，沒什么章法，只是對於一些比重要的或者比較細節的地方做一下記錄。
1,Props中的對象和數組類型必須從一個工廠函數獲取，比如 List: { typs: Array, default: ()=>[], }
2,給組件動態傳遞屬性時，屬性值最好用破折號分開，如 <card :is-visible=“isCardVisible” />，但是在子組件的props中，可以用isVisible獲取回來。因為在html中，大小駝峰語法（camelCase）等價於全小寫的破折號語法（kebab）；
3,原生屬性如style，title，class如果傳遞給了子組件，會默認掛載到子組件的根元素上；
4，父組件向子組件注入方法，實則是注入了方法的指針，子組件在調用的時候還是調用到父組件里面；
5，this.$emit會返回當前組件的vue實例，也就是this指向的堆內存中地址；
6，建議組件以大寫字母開頭；
7，v-slot:name可以代替slot=“name”, v-slot:name=“(index, record)”可以代替slot=“name” 加上slot-scope=“index, record”；
8，為了減少復雜度，virtual dom的diff算法的基本概念就是”只做同層級節點比較”；
9，如果沒有key值，diff算法在做同層級節點比較時，會嚴格按照時間順序去對比，因為缺乏身份標識器key，導致甚至連順序調換這種場景都無法識別，會直接銷毀重建；所以它在同層級比較的時候並不知道下一級的關系會是怎樣，它只關注當前層級的節點。這看起來是一個壞處，其實更是一個好處，只專注於當前層級的復雜度是最低的。 所以如果有key的話，在新的同層節點生成的時候，就會根據key值去找原同層節點組有沒有完全相同，盡可能復用老節點。 所以key值的作用就是為了關閉嚴格順序節點對比法則，盡可能復用相同節點，節省刪除新建節點的開銷。
10，組件的數據來源分為屬性（通過props傳進來的），以及狀態(自身的data)。
11，只有被html用到的屬性才會去做依賴收集，到時候才會去做更新通知。
12，如果需要對data的某個對象的某個屬性值做監聽，可以通過computed把這個屬性值的層級提上來，然后在watch中監聽computed里面的屬性。
13，重置vue實例的data： Object.assign(this.$data, this.$options.data());
14，強制刷新template模板: this.$forceUpdate;
15,watch函數的參數依次為newVal, oldVal；
16，計算屬性computed的優勢就在於它可以監聽多個數據依賴，當然用watch也可以，但是這樣我們就要手動為每個數據依賴添加watch函數，顯得十分冗余。
17，能用computed的地方就用computed。
18，provide提供響應式數據到子孫組件的最佳方式是直接把this指針賦給一個變量，然后傳給子孫組件，子孫組件通過點運算符來取相應屬性。
19，說明provide的查找類似於作用域鏈，從下往祖先組件找，一旦找到就停下了。
20，ref如果掛載到html元素上，會取到一個DOM節點；如果掛載到一個組件上，會取到這個組件的實例對象。