Vue知識概括

2022-03-17 19:21:37 字數 3954 閱讀 8526

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...