Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
初始化數(shù)據(jù)
環(huán)境搭建:菜鳥學(xué)Vue源碼第一步之rollup環(huán)境搭建步
響應(yīng)式數(shù)據(jù)的核心就是，數(shù)據(jù)變化了可以監(jiān)聽到數(shù)據(jù)變化了，數(shù)據(jù)的取值和更改值可以監(jiān)測到,首先第一步需要?jiǎng)?chuàng)建一個(gè)Vue實(shí)例
創(chuàng)建Vue實(shí)例
//dist/index.html
//用Vue創(chuàng)造一個(gè)實(shí)例
const vm = new Vue({
data(){
return {
name:'i東東',
age:18
}
}
})
創(chuàng)造完 Vue實(shí)例，緊接著就需要有一個(gè)類去代理data中的數(shù)據(jù)，但是在Vue中并沒有直接去用class去構(gòu)建一個(gè)類，因?yàn)檫@樣寫會(huì)將所有的方法都耦合在一起(類的特點(diǎn))，所以Vue本身采用了一個(gè)構(gòu)造函數(shù)，通過構(gòu)造函數(shù)去擴(kuò)展方法。
構(gòu)造函數(shù)擴(kuò)展方法
//src/index.js
import { initMixin } from "./init";
function Vue(options){
this._init(options)
}
initMixin(Vue) // 擴(kuò)展了init方法 (后面會(huì)寫)
export default Vue
在拿到options選項(xiàng)之后需要做一個(gè)初始化，就需要加一個(gè)方法來用于初始化。但是如果功能一多，就很比較亂，所以就需要把它拆成兩個(gè)文件
export function initMixin(Vue) { //給Vue增加init方法
Vue.prototype._init = function (options) { //用來初始化數(shù)據(jù) }
}
這樣就可以直接在index.js中調(diào)用initMixin方法,這種方法，就可以把這些原型方法擴(kuò)展成一個(gè)個(gè)函數(shù)，通過函數(shù)的方式在圓形上去擴(kuò)展功能。
在用的時(shí)候就可以在當(dāng)前實(shí)例上擴(kuò)展一些屬性，比如Vue中的vm.$optios,就是用來獲取用戶配置的,緊接著就需要進(jìn)行初始化狀態(tài)
初始化狀態(tài)
//src/init.js
import { initState } from "./state"
export function initMixin(Vue) { //給Vue增加init方法
Vue.prototype._init = function (options) { //用來初始化數(shù)據(jù)
// 所有以$開頭的都會(huì)被認(rèn)為是Vue的屬性，比如$nextTick()
const vm = this
vm.$options = options // 將用戶的屬性掛載到實(shí)例上
// 初始化狀態(tài)(props,methods,data等進(jìn)行處理)原型中的this值得都是實(shí)例
initState(vm)
}
}
initState方法可以將它進(jìn)行拆分到一個(gè)新的文件中,通過initState方法對數(shù)據(jù)進(jìn)行劫持，判斷數(shù)據(jù)是否存在，然后調(diào)用initData方法對數(shù)據(jù)進(jìn)行代理
調(diào)用initData方法對數(shù)據(jù)進(jìn)行代理
//
/src/state.js
export function initState(vm){
// 對數(shù)據(jù)需要進(jìn)行劫持
const opts = vm.$options //獲取所有選項(xiàng)
if (opts.data){
initData(vm)
}
}
function initData(vm){
// 對數(shù)據(jù)進(jìn)行代理
let data = vm.$options.data
// data可以是函數(shù)或者對象，根實(shí)例可以是對象，組件data必須勢函數(shù)
data = typeof data === 'function' ? data.call(vm) : data
console.log(data); // {name: 'i東東', age: 18}
}
執(zhí)行index.html 當(dāng)控制臺輸出{name: 'i東東', age: 18}就表示初始化數(shù)據(jù)完成
以上就是Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化的詳細(xì)內(nèi)容，更多關(guān)于Vue 數(shù)據(jù)初始化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇vue 中滾動(dòng)條始終定位在底部的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何實(shí)現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
nuxt框架中對vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法
這篇文章主要介紹了nuxt框架中對vuex進(jìn)行模塊化設(shè)置的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項(xiàng)目devServer.proxy代理配置詳解的是一個(gè)非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue自定義密碼輸入框解決瀏覽器自動(dòng)填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動(dòng)填充密碼的問題,通過將密碼輸入框的type設(shè)置為text，修改樣式上的顯示，來實(shí)現(xiàn)既可以讓瀏覽器不自動(dòng)填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長的直線,?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下2022-04-04
vue elementUI表格控制顯示隱藏對應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了nuxt 頁面路由配置,主頁輪播組件開發(fā)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11