vue中如何初始化data數(shù)據(jù)
如何初始化data數(shù)據(jù)
后臺(tái)管理系統(tǒng)中,新建和編輯使用同一個(gè)頁(yè)面,常常需要初始化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ā)生了什么呢?
改寫(xiě)的原因
createApp是一個(gè)Vue中的工廠函數(shù),以函數(shù)的方式進(jìn)行導(dǎo)入和調(diào)用。而函數(shù)式的好處是
1、消滅了原來(lái)掛載在Vue上的靜態(tài)方法,變成實(shí)例方法,可以減少內(nèi)存占用,便于tree-shaking,減小了打包體積;
2、因?yàn)楹瘮?shù)式和class裝飾器對(duì)ts的支持好,使用函數(shù)的方式調(diào)用,可以更好的支持ts,提高類(lèi)型支持
3、根組件的api,如data要和子組件的api保持相同的格式,掛載從$mount改為mount,簡(jiǎn)化了api并統(tǒng)一了api的一致性
4、new Vue中掛載的方法會(huì)造成全局污染,不能獨(dú)立出來(lái),createApp可以相互獨(dú)立,并按需掛載。
流程實(shí)現(xiàn)
mount
const Vue = { createApp(options) { //返回app實(shí)例 return { mount(selector){ // 獲取渲染函數(shù),編譯結(jié)果 // 渲染dom,追加到宿主元素 } compile(template){ //返回render return function render(){ //描述視圖 } } } } }
在調(diào)用createApp時(shí),如果options中無(wú)render,則初始化組件,調(diào)用compile產(chǎn)生一個(gè)render,若有render則直接掛載;
Vue2中追加元素使用比較替換的方式,diff元素間區(qū)別進(jìn)行對(duì)比判斷,Vue3中則是直接進(jìn)行刪除重加。
可以在setup或者是data中定義響應(yīng)式變量, setup的優(yōu)先級(jí)更高。
createApp
Vue暴露的兩個(gè)初始化的函數(shù),createApp和createRenderer,他們之間的調(diào)用關(guān)系
/*暴露給Vue的createApp*/ function createApp(options){ const renderer = Vue.createRenderer({ /*定義一些平臺(tái)特有的api,一些實(shí)例*/ aaa(){}, bbb(){} }) /*用戶(hù)調(diào)用的createApp,實(shí)際上是渲染器的createApp*/ return renderer.createApp() } function createRenderer({aaa,bbb}){ /*獲得渲染器*/ /*這個(gè)createApp是函數(shù)內(nèi)部的*/ return createApp(options){ /*掛載邏輯*/ return { /*返回App實(shí)例*/ } } }
源碼流程
1、用戶(hù)調(diào)用createApp方法 =》 通過(guò)ensureRenderer得到渲染器
2、渲染器調(diào)用createRender =》※調(diào)用工廠函數(shù)baseGreateRenderer,這個(gè)函數(shù)中定義了patch和diff等,最終會(huì)return一個(gè)render用來(lái)給spa頁(yè)面進(jìn)行渲染,一個(gè)hydrate用來(lái)給ssr頁(yè)面進(jìn)行注水,還有一個(gè)函數(shù)的createApp(不同于Vue的createApp)
3、在函數(shù)的createApp中會(huì)定義程序的實(shí)例方法,如mount,get,set,use,mixin等
4、mount實(shí)例方法會(huì)去查看是否有根組件掛載,使用什么方法進(jìn)行掛載(spa/ssr)
5、render方法調(diào)用patch方法進(jìn)行打補(bǔ)丁
6、patch方法根據(jù)傳入的節(jié)點(diǎn)類(lèi)型進(jìn)行掛載方法的判斷,如果首次掛載則為掛載component,之后是掛載element(patch方法會(huì)將vnode轉(zhuǎn)化為node節(jié)點(diǎn))
7、patch方法執(zhí)行內(nèi)部processComponent方法,最終執(zhí)行mountComponent方法,也就是Vue2中$mount最終執(zhí)行的方法
初始化流程
1、根組件的實(shí)例化:調(diào)用createComponentInstance
2、初始化根組件:調(diào)用setupComponent方法,也就是Vue2中的this.$_init方法,用來(lái)將選項(xiàng)進(jìn)行合并,并設(shè)置鉤子和響應(yīng)式
3、安裝render函數(shù)的副作用函數(shù):setupRendererEffect
在Vue3中取消了watcher改為了副作用函數(shù),副作用函數(shù)會(huì)在每次響應(yīng)式數(shù)據(jù)發(fā)生變化的時(shí)候重新執(zhí)行,內(nèi)部的render函數(shù)的執(zhí)行會(huì)觸發(fā)依賴(lài)收集,這樣當(dāng)響應(yīng)式數(shù)據(jù)變化時(shí),響應(yīng)式組件就會(huì)更新。
PS:與react中的useEffect不同的方面是,useEffect需要手動(dòng)的收集依賴(lài),而Vue中的effect()會(huì)自動(dòng)的收集依賴(lài)。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例
今天小編就為大家分享一篇Vue通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue 微信端掃描二維碼蘋(píng)果端卻只能保存圖片問(wèn)題(解決方法)
這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁(yè)巴拉巴拉的,然后就很順利的遇到了在安卓端掃碼的時(shí)候,順利的一塌糊涂,然后到了蘋(píng)果端的時(shí)候,就只能出現(xiàn)一個(gè)保存圖片,然后就寫(xiě)一下記錄一下這問(wèn)題的解決方法2020-01-01Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中,編寫(xiě)組件的方式是使用Options API,它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫(xiě)對(duì)應(yīng)的功能模塊,這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式
這篇文章主要介紹了Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue新手入門(mén)出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問(wèn)題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11