emmm…
一個phper，也來學習VUE啦~
（回爐學習筆記）
插槽
構建頁面過程中一般會把用的比較多的公共的部分抽取出來作為一個單獨的元件，但是在實際使用這個元件的時候卻又不能完全的滿足需求，我們希望在這個元件中新增一點東西，這時候我們就需要用到插槽來分發內容。插槽是傳遞複雜內容的一種方式，僅是因為在使用模板中無法使用簡單的屬性傳遞複雜的內容。
作用域插槽->返回元件的函式
雙向繫結
本質上是監聽事件再更新資料，例：
text或textarea元素使用value屬性和input事件
元件更新
資料來源(單向):
1. 來自父元素的屬性
2. 來自元件自身的狀態 data
3. 來自狀態管理器, 如: vuex, Vue.observable
狀態 data vs 屬性 props
1. 狀態是元件自身的資料
2. 屬性是來自父元件的資料
3. 狀態的改變未必會觸發更新
4. 屬性的改變未必會觸發更新
Vue 的”響應式”, 是指當資料改變後, Vue 會通知到使用該資料的程式碼, 即檢視隨資料更新而改變.
狀態 data:
1. 資料放在 return 裡面才會做響應式
2. return 裡面物件裡未宣告的欄位, 也不會做響應式
3. 對陣列的直接操作會做響應式
4. 在 return 裡宣告的欄位, 在檢視層未使用的欄位也不會做響應式
因此在使用時需要注意:
1. 在檢視層要用到的資料需要在 return 裡先宣告
2. 業務邏輯需要, 但不需要在檢視層使用的資料, 可以放在 return 外面, 用 “this.“ 宣告和使用
computed vs watch
計算屬性 computed:
1. 減少模板中的計算邏輯
2. 資料快取
3. 依賴固定的資料型別(響應式資料)
偵聽器 watch
1. 更加靈活, 通用
2. watch 中可以執行任何邏輯, 如: 函式節流, Ajax 非同步獲取資料, 甚至操作 DOM
3. 當需要在資料變化時執行非同步或開銷較大的操作時使用
4. 可以巢狀監聽, 如: “a.b”
computed能做的，watch也能做，反之不行
能用computed儘量用computed$forceUpdate強制更新的意思，不管資料是否變化
v-if vs v-show
- v-if 是”真正”的條件渲染, 因為它會確保在切換過程中條件塊內的事件偵聽器和子元件適當地被銷燬和重建.
- v-if 也是惰性的：如果在初始渲染時條件為假, 則什麼也不做——直到條件第一次變為真時, 才會開始渲染條件塊.
- v-show, 不管初始條件是什麼, 元素總是會被渲染, 並且只是簡單地基於 CSS 進行切換(通過設定 style=”display: none;” 進行切換).
- 一般來說, v-if 有更高的切換開銷, 而 v-show 有更高的初始渲染開銷. 因此, 如果需要非常頻繁地切換, 則使用 v-show 較好; 如果在執行時條件很少改變, 則使用 v-if 較好.
Vuex
Vuex 也是一個單向的一個資料流：
Vuex 提供資料State來驅動我們的檢視（Vue Components）的渲染（Render），然後再通過檢視派發（Dispatch）我們的Action，
我們在Action中可以進一步的進行一些非同步的操作，譬如我們通過Ajax去後端去獲取一些我們想要的一些後端的一些資料。
然後我們通過commit的形式將Action提交給我們的Mutations，最後由Mutations處理完畢後，再來最終更改我們的State中的資料，如此迴圈。
本作品採用《CC 協議》，轉載必須註明作者和本文連結