成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS每日一題:new Vue()中發(fā)生了什么？

fobnn / 2643人閱讀

摘要：?jiǎn)栔邪l(fā)生了什么先從語(yǔ)法上分析，關(guān)鍵字在語(yǔ)言中代表實(shí)例化一個(gè)對(duì)象而實(shí)際上是一個(gè)類我們簡(jiǎn)單看一下源碼源碼地址從源碼可以看到類中非常干凈，只是執(zhí)行了一個(gè)私有函數(shù)并且只能通過關(guān)鍵字初始化接著我們追蹤至函數(shù)源碼地址從上面的代碼我們看見很清淅的

20190214問

new Vue()中發(fā)生了什么？

先從語(yǔ)法上分析，new關(guān)鍵字在js語(yǔ)言中代表實(shí)例化一個(gè)對(duì)象, 而Vue實(shí)際上是一個(gè)類, 我們簡(jiǎn)單看一下源碼

源碼地址 https://github.com/vuejs/vue/...

// 從源碼可以看到vue類中非常干凈，只是執(zhí)行了一個(gè)_init私有函數(shù), 并且只能通過new關(guān)鍵字初始化
function Vue (options) {
  if (process.env.NODE_ENV !== "production" &&
    !(this instanceof Vue)
  ) {
    warn("Vue is a constructor and should be called with the `new` keyword")
  }
  this._init(options)
}

接著我們追蹤至_init函數(shù)

源碼地址 https://github.com/vuejs/vue/...

export function initMixin (Vue: Class) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== "production") {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, "beforeCreate")
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, "created")

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

從上面的代碼我們看見_init很清淅的干了幾件事, 合并相關(guān)配置, 初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等

題外話

Vue初始化邏輯非常清淅，把不同的功能拆成一些多帶帶的函數(shù)執(zhí)行，這種思想值得借鑒和學(xué)習(xí)

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101705.html

相關(guān)文章

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    zacklee 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    lbool 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

    Alex 評(píng)論0 收藏0

  • JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？

    摘要：什么情況下適合使合使用中有幾個(gè)步驟開始之前先簡(jiǎn)單了解一下定義是一個(gè)狀態(tài)管理機(jī)制采用集中式存儲(chǔ)應(yīng)用所有組件的狀態(tài)嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲(chǔ)比如下面這段代碼，同時(shí)需要用到，那么我們首先能想到就是在 20190121 什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？ 開始之前先簡(jiǎn)單了解一下vuex 定義: vuex是一個(gè)狀態(tài)管理機(jī)制,采用...

    wow_worktile 評(píng)論0 收藏0

  • JS每日一題：Vue-router有哪些鉤子？使用場(chǎng)景？

    摘要：?jiǎn)栍心男┿^子使用場(chǎng)景的實(shí)現(xiàn)可以點(diǎn)這里前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前什么什么之后英文叫專業(yè)點(diǎn)叫生命周期，裝逼點(diǎn)可以叫守衛(wèi)中也存在鉤子的概念分為三步記憶全局守衛(wèi)路由獨(dú)享守衛(wèi)組件獨(dú)享守衛(wèi)全局守衛(wèi)很好理解，全 20190218問 Vue-router有哪些鉤子？使用場(chǎng)景？ router的實(shí)現(xiàn)可以點(diǎn)這里 前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在...

    張金寶 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<