- 數據驅動視圖
UI=render(state) -
object通過js的object.defineProperty方法偵測數據變化- object類型把每一個屬性轉換成
getter/setter的形式偵測數據變化(getter收集依賴，setter通知依賴更新)； - 只能觀測到
object數據的取值與設置值，再往object添加或刪除值時無法更新視圖； - 可通過
Vue.set和Vue.delete達到更新視圖的目的；
- object類型把每一個屬性轉換成
-
Array數組變化偵測是通過攔截器實現（push,pop,shift,unshift,splice,sort,reverse） - 虛擬DOM：用一個js對象來描述一個
DOM節點。用js的計算性能換取操作dom所消耗的性能，用js模擬出一個虛擬dom節點，通過DOM-Diff算法計算出需要更新的地方，然后去更新需要更新的視圖。
<div class="a" id="b">我是內容</div>
{
tag:'div', // 元素標簽
attrs:{ // 屬性
class:'a',
id:'b'
},
text:'我是內容', // 文本內容
children:[] // 子元素
}
VNode類在虛擬DOM的作用：渲染視圖前，把寫好的template模板先編譯成VNode并緩存下來，當有頁面數據發生變化需要重新渲染時，則對比數據發生變化前后的VNode進行對比。找出差異(DOM-Diff算法)，有差異的VNode對應真實DOM節點就是需要重新渲染的節點，最后根據有差異的VNode創建出真實的DOM節點再插回視圖中，完成一次視圖更新。
從而達到盡可能少的操作真實DOM的目的，以節省性能。DOM-Diff的過程稱為patch(補丁)過程。過程所做的事：
- 創建節點：新的
VNode中有而舊的oldVNode中沒有，就在舊的oldVNode中創建。 - 刪除節點：新的
VNode中沒有而舊的oldVNode中有，就從舊的oldVNode中刪除。 - 更新節點：新的
VNode和舊的oldVNode中都有，就以新的VNode為準，更新舊的oldVNode。
- 與數據相關的實例方法
vm.$watch(expOrFn, callback, [options])：觀察vue實例變化的一個表達式或計算屬性性函數。vm.$set()：向響應式對象中添加一個屬性。vm.$delete()：刪除對象的屬性。
- 全局api
Vue.extend( options )：使用基礎Vue構造器，創建一個‘子類’，接收對象參數。Vue.nextTick( [callback, context] )：在DOM更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后DOM。在created()鉤子操作DOM需在vue.nextTick中使用。Vue.set(target, property/index, value)：向響應式對象中添加一個屬性，并確保這個新屬性是響應式的，且觸發視圖更新。Vue.delete(target, propertyName/index)：刪除對象屬性。Vue.directive(id, [definition])：注冊或獲取全局指令。Vue.filter(id, [definition])：注冊或獲取全局過濾器。Vue.component(id, [definition])：注冊或獲取全局組件。Vue.use(plugin)：安裝插件。在new Vue()之前使用。Vue.mixnin(mixin)：注冊一個混入，影響注冊之后所有創建的每個Vue實例。Vue.compile(compile)：在render函數中編譯模板字符串。只在獨立構建時有效。Vue.observable(object)：讓一個對象可響應。Vue內部會用它來處理data函數返回對象(小型vuex)。Vue.version：版本號
過濾器
filters(vue3已廢棄)：本質是js函數。用法可串聯、可傳參{{ text | filterA | filterB(val1, val2) }}自定義指令：合適的時機執行定義指令時所設置的鉤子函數。
內置組件
<keep-alive>：抽象組件，不會渲染元素，包裹組件時會緩存不活動的組件實例，而不是銷毀。可以保留組件的狀態或避免多次重新渲染，以提高頁面性能。
被<keep-alive>緩存后，再次渲染時不會執行created、mounted等鉤子函數，會調用activated、deactivated。
可接收三個屬性：
-
include：字符串或正則表達式。只緩存名稱匹配上的組件； -
exclude：字符串或正則表達式。名稱匹配上的組件都不緩存； -
max：數字。最多可以緩存多少組件實例。
// 逗號分隔字符串
<keep-alive include="a,b">
<component is="view"></component>
</keep-alive>
// 正則表達式 用v-bind
<keep-alive :include="/a|b/">
<component is="view"></component>
</keep-alive>
// 數組 用v-bind
<keep-alive :include="['a', 'b']">
<component is="view"></component>
</keep-alive>
緩存淘汰策略LRU：算法根據數據的歷史訪問記錄來進行淘汰數據，其核心思想是“如果數據最近被訪問過，那么將來被訪問的幾率也更高”
