你沒深入瞭解的知識點

1.vue生命週期
2.vue 雙向綁定原理
3.vue router原理
4.vue router動態路由

1.閉包
2.原型鏈
3.深/淺拷貝
4.this指向
5.柯里式
6.ES6
7.webpack 配置 打包
8.虛擬dom
9.js 堆棧

1.浮動原理 爲什麼要清浮動
2.css選擇器優先級 瀏覽器怎麼進行解讀及渲染
3.absolute relative的定位相對圓點是什麼?

1.vue 生命週期鉤子
clipboard.png

注意:所有的生命週期鉤子自動綁定this上下文到實例中,因此你可以訪問數據,對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法(例如:created:() => this.fetchTodos() )。這是因爲箭頭函數綁定了父級上下文,因此this與你期待的vue實例不同,this.fetchTodos的行爲未定義。

beforeCreate
在實例初始化之後,數據觀測(data observer)和 event/watcher事件配置之前被調用。
created
在實例創建完成後被立即調用.在這一步,實例已完成以下的配置:數據觀測(data observer),屬性和方法的運算,watch/event 事件回調。然而,掛載階段還沒開始,$el屬性目前不可見。
beforeMount
在掛載開始之前被調用:相關的 render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。該鉤子在服務器渲染期間不被調用。
mounted
el被新創建的 vm.$el 替換,病掛載到實例上去之後調用該鉤子。如果root實例掛載了一個文檔內元素,當 mounted
被調用時 vm.$el 也在文檔內。 注意: mounted 不會承諾所有子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢,可以用
vm.$nextTick 替換調 mounted:(該鉤子在服務器端渲染期間不被調用)
mounted:function() {
    this.$nextTick(function () {
    //code that will run only after the 
    //entire view has been rendered
    }) } 

    
beforeUpdate
數據更新時調用,發生在虛擬 DOM 打補丁之前。這裏適合在更新之前訪問現有的DOM,比如
手動移除已經添加的事件監聽器。
該鉤子在服務器端渲染期間不被調用,因爲只有初次渲染會在服務端進行。
updated
由於數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之後會調用該鉤子。

當這個鉤子被調用時,組件DOM已經更新,所以你現在可以執行依賴於DOM的操作。然而在大多數情況下,你應該避免在此期間更改狀態。如果要相應狀態改變,通常最好使用計算屬性或watcher取而代之。

注意 updated 不會承諾所有的子組件都一起被重繪。如果你希望等到整個視圖都重繪完畢,可以用vm.$nextTick 替換調
mounted:(該鉤子在服務器端渲染期間不被調用)

mounted:function() {
    this.$nextTick(function () {
    //code that will run only after the 
    //entire view has been rendered
    }) } 
activated
keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。
構建組件 keep-alive
動態組件 keep-alive
deactivated
keep-alive組件停用時調用。 該鉤子在服務器端渲染期間不被調用
構建組件 keep-alive
動態組件 keep-alive
beforeDestory
實例銷燬之前調用。在這一步,實例仍然完全可用。
該鉤子在服務器端渲染期間不被調用。
destoryed
vue實例銷燬後調用。調用後,vue實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷燬。
該鉤子在服務器端渲染期間不被調用。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章