如何初始化data數(shù)據(jù)

后臺管理系統(tǒng)中，新建和編輯使用同一個頁面，常常需要初始化data數(shù)據(jù)。

form: {
                id: 0,
                name: '',
                place: '',
                number: '',
                admin_uid: '',
                is_audit: 2,
                contact: '',
                sort: '',
                is_network: 2,
                network_type: 1,
                is_projector: 2,
                is_board: 2,
                is_live: 2,
                others:''
      },

使用

this.$data.form = this.$options.data().form

可將form中的所有數(shù)據(jù)初始化。

vue程序初始化流程

初始化

在vue3中，程序的初始化不再沿用vue2的new Vue()方法，而是使用了createApp。在createApp中發(fā)生了什么呢？

改寫的原因

createApp是一個Vue中的工廠函數(shù)，以函數(shù)的方式進行導(dǎo)入和調(diào)用。而函數(shù)式的好處是

1、消滅了原來掛載在Vue上的靜態(tài)方法，變成實例方法，可以減少內(nèi)存占用，便于tree-shaking，減小了打包體積；

2、因為函數(shù)式和class裝飾器對ts的支持好，使用函數(shù)的方式調(diào)用，可以更好的支持ts，提高類型支持

3、根組件的api，如data要和子組件的api保持相同的格式，掛載從$mount改為mount，簡化了api并統(tǒng)一了api的一致性

4、new Vue中掛載的方法會造成全局污染，不能獨立出來，createApp可以相互獨立，并按需掛載。

流程實現(xiàn)

mount

const Vue = {
	createApp(options) {
		//返回app實例
		return {
			mount(selector){
				// 獲取渲染函數(shù)，編譯結(jié)果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述視圖
				}
			}
		}
	}
}

在調(diào)用createApp時，如果options中無render，則初始化組件，調(diào)用compile產(chǎn)生一個render，若有render則直接掛載；

Vue2中追加元素使用比較替換的方式，diff元素間區(qū)別進行對比判斷，Vue3中則是直接進行刪除重加。

可以在setup或者是data中定義響應(yīng)式變量， setup的優(yōu)先級更高。

createApp

Vue暴露的兩個初始化的函數(shù)，createApp和createRenderer，他們之間的調(diào)用關(guān)系

/*暴露給Vue的createApp*/
function createApp(options){
	const renderer =  Vue.createRenderer({
		/*定義一些平臺特有的api，一些實例*/
		aaa(){},
		bbb(){}
	})
	/*用戶調(diào)用的createApp，實際上是渲染器的createApp*/
	return renderer.createApp()
}

function createRenderer({aaa,bbb}){
	/*獲得渲染器*/
	/*這個createApp是函數(shù)內(nèi)部的*/
	return createApp(options){
		/*掛載邏輯*/
		return {
			/*返回App實例*/
		}
	}
}

源碼流程

1、用戶調(diào)用createApp方法 =》 通過ensureRenderer得到渲染器

2、渲染器調(diào)用createRender =》※調(diào)用工廠函數(shù)baseGreateRenderer，這個函數(shù)中定義了patch和diff等，最終會return一個render用來給spa頁面進行渲染，一個hydrate用來給ssr頁面進行注水，還有一個函數(shù)的createApp（不同于Vue的createApp）

3、在函數(shù)的createApp中會定義程序的實例方法，如mount，get，set，use，mixin等

4、mount實例方法會去查看是否有根組件掛載，使用什么方法進行掛載（spa/ssr）

5、render方法調(diào)用patch方法進行打補丁

6、patch方法根據(jù)傳入的節(jié)點類型進行掛載方法的判斷，如果首次掛載則為掛載component，之后是掛載element(patch方法會將vnode轉(zhuǎn)化為node節(jié)點)

7、patch方法執(zhí)行內(nèi)部processComponent方法，最終執(zhí)行mountComponent方法，也就是Vue2中$mount最終執(zhí)行的方法

初始化流程

1、根組件的實例化：調(diào)用createComponentInstance

2、初始化根組件：調(diào)用setupComponent方法，也就是Vue2中的this.$_init方法，用來將選項進行合并，并設(shè)置鉤子和響應(yīng)式

3、安裝render函數(shù)的副作用函數(shù)：setupRendererEffect

在Vue3中取消了watcher改為了副作用函數(shù)，副作用函數(shù)會在每次響應(yīng)式數(shù)據(jù)發(fā)生變化的時候重新執(zhí)行，內(nèi)部的render函數(shù)的執(zhí)行會觸發(fā)依賴收集，這樣當(dāng)響應(yīng)式數(shù)據(jù)變化時，響應(yīng)式組件就會更新。

PS:與react中的useEffect不同的方面是，useEffect需要手動的收集依賴，而Vue中的effect()會自動的收集依賴。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論