国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

你想要的——vue源碼分析(2)

objc94 / 2182人閱讀

摘要:本次分析的版本是。的實例化由上一章我們了解了類的定義,本章主要分析用戶實例化類之后,框架內部做了具體的工作。所以我們先看看的構造函數里面定義了什么方法。這個文件聲明了類的構造函數,構造函數中直接調用了實例方法來初始化的實例,并傳入參數。

背景

Vue.js是現在國內比較火的前端框架,希望通過接下來的一系列文章,能夠幫助大家更好的了解Vue.js的實現原理。本次分析的版本是Vue.js2.5.16。(持續更新中。。。)

目錄

Vue.js的引入

Vue的實例化

Vue數據處理(未完成)

。。。

Vue的實例化

由上一章我們了解了Vue類的定義,本章主要分析用戶實例化Vue類之后,Vue.js框架內部做了具體的工作。

舉個例子

var demo = new Vue({
  el: "#app",
  created(){},
  mounted(){},
  data:{
    a: 1,
  },
  computed:{
    b(){
      return this.a+1
    }
  },
  methods:{
    handleClick(){
      ++this.a ;
    }
  },
  components:{
    "todo-item":{
      template: "
  • to do
  • ", mounted(){ } } } })

    以上是一個簡單的vue實例化的例子,用戶通過new的方式創建了一個Vue的實例demo。所以我們先看看Vue的構造函數里面定義了什么方法。

    src/core/instance/index.js

    這個文件聲明了Vue類的構造函數,構造函數中直接調用了實例方法_init來初始化vue的實例,并傳入options參數。

    import { initMixin } from "./init"
    import { stateMixin } from "./state"
    import { renderMixin } from "./render"
    import { eventsMixin } from "./events"
    import { lifecycleMixin } from "./lifecycle"
    import { warn } from "../util/index"
    
    // 聲明Vue類
    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)
    }
    // 將Vue類傳入各種初始化方法
    initMixin(Vue)
    stateMixin(Vue)
    eventsMixin(Vue)
    lifecycleMixin(Vue)
    renderMixin(Vue)
    
    export default Vue
    

    接下來我們看看這個_init方法具體做了什么事情。

    src/core/instance/init.js

    這個文件的initMixin方法定義了vue實例方法_init。

     Vue.prototype._init = function (options?: Object) {
        // this指向Vue的實例,所以這里是將Vue的實例緩存給vm變量
        const vm: Component = this
        // a uid
        // 每一個vm有一個_uid,從0依次疊加
        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
        // 表示vue實例
        vm._isVue = true
        // merge options
    
        // 處理傳入的參數,并將構造方法上的屬性跟傳入的屬性合并(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 */
        // 添加vm的_renderProxy屬性,非生產環境ES6的proxy代理,對非法屬性獲取進行提示
        if (process.env.NODE_ENV !== "production") {
          initProxy(vm)
        } else {
          vm._renderProxy = vm
        }
        // expose real self
        // 添加vm的_self屬性
        vm._self = vm
        // 對vm進行各種初始化
    
    
        // 將vm自身添加到該vm的父組件的的$children數組中
        // 添加vm的$parent,$root,$children,$refs,_watcher,_inactive,_directInactive,_isMounted,_isDestroyed,_isBeingDestroyed屬性
        // 具體實現在 src/core/instance/lifecycle.js中,代碼比較簡單,不做展開
        initLifecycle(vm)
    
        // 添加vm._events,vm._hasHookEvent屬性
        initEvents(vm)
    
        // 添加vm._vnode,vm._staticTrees,vm.$vnode,vm.$slots,vm.$scopedSlots,vm._c,vm.$createElement
        // 將vm上的$attrs,$listeners 屬性設置為響應式的
        initRender(vm)
    
        // 觸發beforeCreate鉤子,如果options中有beforeCreate的回調函數,則會被調用
        callHook(vm, "beforeCreate")
    
        initInjections(vm) // resolve injections before data/props
    
        // 初始化state,包括Props,methods,Data,Computed,watch;
        // 這塊內容比較核心,所以會在下一章詳細講解,這里先大概描述一下
        // 對于prop以及data屬性,將其設置為vm的響應式屬性,即使用object.defineProperty綁定vm的prop和data屬性并設置其getter&setter
        // 對于methods,則將每個method都掛載在vm上,并將this指向vm
        // 對于Computed,在將其設置為vm的響應式屬性之外,還需要定義watcher,用于收集依賴
        // watch屬性,也是將其設置為watcher實例,收集依賴
        initState(vm)
    
        // 初始化provide屬性
        initProvide(vm) // resolve provide after data/props
    
        // 至此,所有數據的初始化工作已經做完,所有觸發created鉤子,在這個鉤子的回調中可以訪問之前所定義的所有數據
        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)
        }
        // 調用vm上的$mount方法
        if (vm.$options.el) {
          vm.$mount(vm.$options.el)
        }
      }

    接下來分析一下vm上的$mount方法具體做了什么事情

    platforms/web/entry-runtime-with-compiler.js

    // 緩存Vue.prototype上的$mount方法到變量mount上
    const mount = Vue.prototype.$mount
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      // 獲取dom上的元素
      el = el && query(el)
    
      /* istanbul ignore if */
      if (el === document.body || el === document.documentElement) {
        process.env.NODE_ENV !== "production" && warn(
          `Do not mount Vue to  or  - mount to normal elements instead.`
        )
        return this
      }
    
      const options = this.$options
      // resolve template/el and convert to render function
      if (!options.render) {
        // 獲取&生成模板
        let template = options.template
        if (template) {
          if (typeof template === "string") {
            if (template.charAt(0) === "#") {
              template = idToTemplate(template)
              /* istanbul ignore if */
              if (process.env.NODE_ENV !== "production" && !template) {
                warn(
                  `Template element not found or is empty: ${options.template}`,
                  this
                )
              }
            }
          } else if (template.nodeType) {
            template = template.innerHTML
          } else {
            if (process.env.NODE_ENV !== "production") {
              warn("invalid template option:" + template, this)
            }
            return this
          }
        } else if (el) {
          template = getOuterHTML(el)
        }
        if (template) {
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== "production" && config.performance && mark) {
            mark("compile")
          }
          // 根據模板生成相關的render,staticRenderFns方法
          // 這塊內容涉及的內容比較多,會在后面的其他章節中有詳細講解
          const { render, staticRenderFns } = compileToFunctions(template, {
            shouldDecodeNewlines,
            shouldDecodeNewlinesForHref,
            delimiters: options.delimiters,
            comments: options.comments
          }, this)
          // 將render,staticRenderFns方法添加到options上
          options.render = render
          options.staticRenderFns = staticRenderFns
    
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== "production" && config.performance && mark) {
            mark("compile end")
            measure(`vue ${this._name} compile`, "compile", "compile end")
          }
        }
      }
      // 調用前面緩存的mount方法
      return mount.call(this, el, hydrating)
    }

    接下來看看緩存的$mount方法的實現

    platforms/web/runtime/index.js

    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      // 獲取相關的dom元素,執行mountComponent方法
      el = el && inBrowser ? query(el) : undefined
      return mountComponent(this, el, hydrating)
    }

    看看mountComponent方法的實現

    export function mountComponent (
      vm: Component,
      el: ?Element,
      hydrating?: boolean
    ): Component {
      vm.$el = el
      if (!vm.$options.render) {
        vm.$options.render = createEmptyVNode
        if (process.env.NODE_ENV !== "production") {
          /* istanbul ignore if */
          if ((vm.$options.template && vm.$options.template.charAt(0) !== "#") ||
            vm.$options.el || el) {
            warn(
              "You are using the runtime-only build of Vue where the template " +
              "compiler is not available. Either pre-compile the templates into " +
              "render functions, or use the compiler-included build.",
              vm
            )
          } else {
            warn(
              "Failed to mount component: template or render function not defined.",
              vm
            )
          }
        }
      }
      // 調用beforeMount鉤子
      callHook(vm, "beforeMount")
      // 設置updateComponent方法
      let updateComponent
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== "production" && config.performance && mark) {
        updateComponent = () => {
          const name = vm._name
          const id = vm._uid
          const startTag = `vue-perf-start:${id}`
          const endTag = `vue-perf-end:${id}`
    
          mark(startTag)
          const vnode = vm._render()
          mark(endTag)
          measure(`vue ${name} render`, startTag, endTag)
    
          mark(startTag)
          vm._update(vnode, hydrating)
          mark(endTag)
          measure(`vue ${name} patch`, startTag, endTag)
        }
      } else {
        updateComponent = () => {
          vm._update(vm._render(), hydrating)
        }
      }
    
      // we set this to vm._watcher inside the watcher"s constructor
      // since the watcher"s initial patch may call $forceUpdate (e.g. inside child
      // component"s mounted hook), which relies on vm._watcher being already defined
    
      // 創建watcher對象,具體watch的實現會在下一章詳細分析
      // 簡單描述一下這個過程:初始化這個watcher對象,執行updateComponent方法,收集相關的依賴
      // updateComponent的執行過程:
      // 先執行vm._render方法,根據之前生成的render方法,生成相關的vnode,也就是virtual dom相關的內容,這個會在后續渲染的章節詳細講解
      // 通過生成的vnode,調用vm._update,最終將vnode生成的dom插入到父節點中,完成組件的載入
      new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
      hydrating = false
    
      // manually mounted instance, call mounted on self
      // mounted is called for render-created child components in its inserted hook
      if (vm.$vnode == null) {
        vm._isMounted = true
        // 調用mounted鉤子,在這個鉤子的回調函數中可以訪問到真是的dom節點,因為在上述過程中已經將真實的dom節點插入到父節點
        callHook(vm, "mounted")
      }
      return vm
    }

    OK,以上就是Vue整個實例化的過程,多謝觀看&歡迎拍磚。

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93985.html

    相關文章

    • 想要——vue源碼分析(1)

      摘要:本次分析的版本是。持續更新中。。。目錄的引入的實例化的引入這一章將會分析用戶在引入后,框架做的初始化工作創建這個類,并往類上添加類屬性類方法和實例屬性實例方法。 背景 Vue.js是現在國內比較火的前端框架,希望通過接下來的一系列文章,能夠幫助大家更好的了解Vue.js的實現原理。本次分析的版本是Vue.js2.5.16。(持續更新中。。。) 目錄 Vue.js的引入 Vue的實例化...

      jifei 評論0 收藏0
    • vue-cli 3.0 源碼分析

      摘要:寫在前面其實最開始不是特意來研究的源碼,只是想了解下的命令,如果想要了解命令的話,那么繞不開寫的。通過分析發現與相比,變化太大了,通過引入插件系統,可以讓開發者利用其暴露的對項目進行擴展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面 其實最開始不是特意來研究 vue-cli 的源碼,只是想了解下 n...

      yiliang 評論0 收藏0
    • Vue 源碼分析之二:Vue Class

      摘要:但沒辦法,還是得繼續。因為這邊返回的是一個,所以會執行如下代碼然后回到剛才的里面,,額,好吧。。。 這段時間折騰了一個vue的日期選擇的組件,為了達成我一貫的使用舒服優先原則,我決定使用directive來實現,但是通過這個實現有一個難點就是我如何把時間選擇的組件插入到dom中,所以問題來了,我是不是又要看Vue的源碼? vue2.0即將到來,改了一大堆,Fragment沒了,所以vu...

      toddmark 評論0 收藏0
    • 入口文件開始,分析Vue源碼實現

      摘要:一方面是因為想要克服自己的惰性,另一方面也是想重新溫故一遍。一共分成了個基礎部分,后續還會繼續記錄。文章中如果有筆誤或者不正確的解釋,也歡迎批評指正,共同進步。最后地址部分源碼 Why? 網上現有的Vue源碼解析文章一搜一大批,但是為什么我還要去做這樣的事情呢?因為覺得紙上得來終覺淺,絕知此事要躬行。 然后平時的項目也主要是Vue,在使用Vue的過程中,也對其一些約定產生了一些疑問,可...

      nidaye 評論0 收藏0
    • 入口文件開始,分析Vue源碼實現

      摘要:一方面是因為想要克服自己的惰性,另一方面也是想重新溫故一遍。一共分成了個基礎部分,后續還會繼續記錄。文章中如果有筆誤或者不正確的解釋,也歡迎批評指正,共同進步。最后地址部分源碼 Why? 網上現有的Vue源碼解析文章一搜一大批,但是為什么我還要去做這樣的事情呢?因為覺得紙上得來終覺淺,絕知此事要躬行。 然后平時的項目也主要是Vue,在使用Vue的過程中,也對其一些約定產生了一些疑問,可...

      Karrdy 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <