Vue源碼學習之數據初始化

更新時間：2022年09月06日 09:18:34 作者：i東東

這篇文章主要為大家介紹了Vue源碼學習之數據初始化實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

初始化數據

環(huán)境搭建:菜鳥學Vue源碼第一步之rollup環(huán)境搭建步

響應式數據的核心就是，數據變化了可以監(jiān)聽到數據變化了，數據的取值和更改值可以監(jiān)測到,首先第一步需要創(chuàng)建一個Vue實例

創(chuàng)建Vue實例

//dist/index.html
//用Vue創(chuàng)造一個實例
const vm = new Vue({
  data(){
    return {
      name:'i東東',
      age:18
    }
  }
})

創(chuàng)造完 Vue實例，緊接著就需要有一個類去代理data中的數據，但是在Vue中并沒有直接去用class去構建一個類，因為這樣寫會將所有的方法都耦合在一起(類的特點)，所以Vue本身采用了一個構造函數，通過構造函數去擴展方法。

構造函數擴展方法

//src/index.js
import { initMixin } from "./init";
function Vue(options){
this._init(options)
}
initMixin(Vue) // 擴展了init方法 (后面會寫)
export default Vue

在拿到options選項之后需要做一個初始化，就需要加一個方法來用于初始化。但是如果功能一多，就很比較亂，所以就需要把它拆成兩個文件

export function initMixin(Vue) { //給Vue增加init方法
  Vue.prototype._init = function (options) { //用來初始化數據 }
}

這樣就可以直接在index.js中調用initMixin方法,這種方法，就可以把這些原型方法擴展成一個個函數，通過函數的方式在圓形上去擴展功能。

在用的時候就可以在當前實例上擴展一些屬性，比如Vue中的vm.$optios,就是用來獲取用戶配置的,緊接著就需要進行初始化狀態(tài)

初始化狀態(tài)

//src/init.js
import { initState } from "./state"
export function initMixin(Vue) { //給Vue增加init方法
  Vue.prototype._init = function (options) { //用來初始化數據
    // 所有以$開頭的都會被認為是Vue的屬性，比如$nextTick()
    const vm = this 
    vm.$options = options // 將用戶的屬性掛載到實例上
    // 初始化狀態(tài)(props,methods,data等進行處理)原型中的this值得都是實例
    initState(vm)
  }
}

initState方法可以將它進行拆分到一個新的文件中,通過initState方法對數據進行劫持，判斷數據是否存在，然后調用initData方法對數據進行代理

調用initData方法對數據進行代理

//
/src/state.js
export function initState(vm){
    // 對數據需要進行劫持
    const opts = vm.$options //獲取所有選項
    if (opts.data){
        initData(vm)
    }
}
function initData(vm){
    // 對數據進行代理
    let data = vm.$options.data
    // data可以是函數或者對象，根實例可以是對象，組件data必須勢函數
    data = typeof data === 'function' ? data.call(vm) : data
    console.log(data); // {name: 'i東東', age: 18}
}

執(zhí)行index.html 當控制臺輸出{name: 'i東東', age: 18}就表示初始化數據完成

以上就是Vue源碼學習之數據初始化的詳細內容，更多關于Vue 數據初始化的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: