export default ,
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {}
};
原理是什麼?
// 註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus',
})// 如果想註冊區域性指令,元件中也接受乙個 directives 的選項:
例項、元件通過 new vue() 建立出來之後會初始化事件和生命週期,然後就會執行 beforecreate 鉤子函式,這個時候,資料還沒有掛載呢,只是乙個空殼,無法訪問到資料和真實的 dom,一般不做操作。
掛載資料,繫結事件等等,然後執行 created 函式,這個時候已經可以使用到資料,也可以更改資料,在這裡更改資料不會觸發 updated 函式,在這裡可以在渲染前倒數第二次更改資料的機會,不會觸發其他的鉤子函式,一般可以在這裡做初始資料的獲取。
接下來開始找例項或者元件對應的模板,編譯模板為虛擬 dom 放入到 render 函式中準備渲染,然後執行 beforemount 鉤子函式,在這個函式中虛擬 dom 已經建立完成,馬上就要渲染,在這裡也可以更改資料,不會觸發 updated,在這裡可以在渲染前最後一次更改資料的機會,不會觸發其他的鉤子函式,一般可以在這裡做初始資料的獲取。
接下來開始 render,渲染出真實 dom,然後執行 mounted 鉤子函式,此時,元件已經出現在頁面中,資料、真實 dom 都已經處理好了,事件都已經掛載好了,可以在這裡操作真實 dom 等事情...
當元件或例項的資料更改之後,會立即執行 beforeupdate,然後 vue 的虛擬 dom 機制會重新構建虛擬 dom 與上一次的虛擬 dom 樹利用 diff 演算法進行對比之後重新渲染,一般不做什麼事兒。
當更新完成後,執行 updated,資料已經更改完成,dom 也重新 render 完成,可以操作更新後的虛擬 dom。
當經過某種途徑呼叫$destroy 方法後,立即執行 beforedestroy,一般在這裡做一些善後工作,例如清除計時器、清除非指令繫結的事件等等。
元件的資料繫結、監聽...去掉後只剩下 dom 空殼,這個時候,執行 destroyed,在這裡做善後工作也可以
beforecreate(),
created(),
beforemount(),
mounted(),
beforeupdate(),
updated(),
beforedestory(),
destoryed()
概念:vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化。
應用場景:vue多個元件之間需要共享資料或狀態。
vuex有幾個核心概念:state、getter、mutation、action、module。
state:儲存狀態資料
getter:從狀態資料派生資料,相當於state的計算屬性。
mutation:儲存用於同步更改狀態資料的方法,預設傳入的引數為state。
action:儲存用於非同步更改狀態資料,但不是直接更改,而是通過觸發mutation方法實現,預設引數為context。
module:vuex模組化。
}
methods:
由於使用單一狀態樹,應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時,store物件就有可能變得相當臃腫。
為了解決以上問題,vuex允許我們將store分割成模組。每個模組擁有自己的state、getter、mutation、action、甚至是巢狀子模組-從上到下進行同樣的分割。
const modulea = ,
getters: {},
mutations: {},
actions: {}
}export default modulea;
const moduleb = ,
getters: {},
mutations: {},
actions: {}
}export default moduleb;
import modulea from './modulea.js';
import moduleb from './moduleb.js';
const store = new vuex.store(
})export default store;
this.$store.state.a.name // -> modulea 的狀態name
this.$store.state.b.name // -> moduleb 的狀態name
computed: ),
...mapstate('b', )
}
其他幾個物件getter、mutation、action的訪問方式類似,都要加上模組名稱字段。
注意:
1、是否使用vuex要根據專案的實際規模,在簡單的應用中使用 vuex 可能會顯得繁瑣冗餘;對於中大型的單頁應用,vuex在狀態管理方面才是最好的選擇。
2、vuex和單純的全域性物件不同。vuex 的狀態儲存是響應式的,當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。
3、不能直接改變 store 中的狀態,改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation,這樣有利於跟蹤每乙個狀態的變化。
作業系統知識概括
spooling系統主要由以下四部分組成 1 輸入井和輸出井 2 輸入緩衝區和輸出緩衝區 3 輸入程序和輸出程序 4 井管理程式 spooling系統的特點 1 提高了i o的速度 2 將獨佔裝置改為共享裝置 3 實現了虛擬裝置功能 緩衝的引入 1 緩和cpu和i o裝置之間速度不匹配的矛盾 2 減...
JavaScript函式基礎知識概括
目錄 1.函式概念與意義 2.定義函式 1 宣告函式第一種方法 自定義函式宣告 2 宣告函式第二種方法 函式表示式 3.函式分類 1 普通函式 2 匿名函式 3 閉包函式 4.函式內部屬性 5.函式屬性和方法 用來完成某種特定動能的 塊,可以有名字,也可以匿名。函式對任何語言來說都是乙個核心的概念。...
JS基礎知識概括(一)
1.js資料型別 number,string,boolean,undefined,null,object,symbol es6新增 1.1 基本型別 單型別 string number boolean null undefined。引用型別 object。裡面包含的 function array d...