当前位置:   article > 正文

Vue2源码梳理:关于vm.$mount的实现

Vue2源码梳理:关于vm.$mount的实现

$mount

  • vue实例挂载的实现,也就是执行 vm.$mount 的方法

  • 在 Runtime + Compiler 版本,入口文件是: src/platform/web/entry-runtime-with-compiler.js

  • $mount 方法也是在这个文件中被定义的

    const mount = Vue.prototype.$mount
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      // 首先对于传入的这个 el 参数,做了一个处理,可以看到 el 参数,可以是个字符串,也可以是个 Element
      // 这里调用了query方法,query方法实际上就是原生的方法,有则document.querySelector,无则,document.createElement 返回一个div 等处理
      el = el && query(el)
    
      // 拿到这个 el 以后,这里就已经被转化成了这个 dom 对象,然后它又做了一个简单的判断
      // 也就是说我的 el 如果是 body 或者是 html 标签的话,它就会报一个错
      // 就是 vue 不可以直接挂载到这个 body 或者 html 上,因为它是会覆盖的,你挂载的话,你会把整个body覆盖,那整个HTML文档不对了
      // 所以说这里在开发环境下,就报了这个警告
      /* istanbul ignore if */
      if (el === document.body || el === document.documentElement) {
        process.env.NODE_ENV !== 'production' && warn(
          `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
        )
        return this
      }
      // 拿到这个options。判断有没有定义render方法,因为平时开发的过程中,代码都是脚手架生成,会有一个 render
      const options = this.$options
      // resolve template/el and convert to render function
      if (!options.render) {
        // 再次判断你有没有写template,一般模板默认是有index.html的,在组件内部也可以使用 template, 有则进行处理
        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) {
          // 如果没有 templete 则执行 getOuterHTML 拿到html
          template = getOuterHTML(el)
        }
        if (template) {
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
            mark('compile')
          }
    
          // 这一块就是跟编译相关了, 编译的话,它其实是调用这个 compileToFunction
          // 拿到生成的一个 render 函数,还有 staticRenderFns
          const { render, staticRenderFns } = compileToFunctions(template, {
            outputSourceRange: process.env.NODE_ENV !== 'production',
            shouldDecodeNewlines,
            shouldDecodeNewlinesForHref,
            delimiters: options.delimiters,
            comments: options.comments
          }, this)
          // 这个 options.render 会在渲染 vnode 的时候会用到
          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, 这个mount 是 runtimeOnly 时的 $mount
      return mount.call(this, el, hydrating)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
  • 它首先获得了 Vue.prototype.$mount 方法,用这个 mount 变量缓存起来,然后又重新定义了一遍这个方法

  • 回到最初的定义,在 src/platforms/web/runtime/index.js 中,是最原始的定义

    // public mount method
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      el = el && inBrowser ? query(el) : undefined
      return mountComponent(this, el, hydrating)
    }
    
    // devtools global hook
    /* istanbul ignore next */
    if (inBrowser) {
      setTimeout(() => {
        if (config.devtools) {
          if (devtools) {
            devtools.emit('init', Vue)
          } else if (
            process.env.NODE_ENV !== 'production' &&
            process.env.NODE_ENV !== 'test'
          ) {
            console[console.info ? 'info' : 'log'](
              'Download the Vue Devtools extension for a better development experience:\n' +
              'https://github.com/vuejs/vue-devtools'
            )
          }
        }
        if (process.env.NODE_ENV !== 'production' &&
          process.env.NODE_ENV !== 'test' &&
          config.productionTip !== false &&
          typeof console !== 'undefined'
        ) {
          console[console.info ? 'info' : 'log'](
            `You are running Vue in development mode.\n` +
            `Make sure to turn on production mode when deploying for production.\n` +
            `See more tips at https://vuejs.org/guide/deployment.html`
          )
        }
      }, 0)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
  • 在我们的这个入口, 为什么会重新定义一遍 $mount?

  • 实际上, 上面这块最原始的代码是给 RuntimeOnly 版本复用用的一个函数

  • 在 Runtime + Compiler 版本,在 src/core/instance/init.js 的 initMixin 中

  • 执行 vm.$mount 时候,实际上调的就是 src/platform/web/entry-runtime-with-compiler.js 这个入口文件

  • 中的 Vue.prototype.$mount 这个函数,现在回到入口文件中的代码中,查看相关代码上的注释

  • 在执行了入口文件中的 .$mount, 最终调用了 RuntimeOnly 的 $mount, 最终执行 mountComponent 方法

  • 而 mountComponent 是在 src/core/instance/lifecycle.js 中定义的

    export function mountComponent (
      vm: Component,
      el: ?Element,
      hydrating?: boolean
    ): Component {
      // 首先会把这个 el 的dom 被 vm.$el 缓存起来
      vm.$el = el
      // 判断有没有 render 函数(或没有 template转换来的 render), 没有则创建一个空的 vnode, 并在开发环境警告
      if (!vm.$options.render) {
        vm.$options.render = createEmptyVNode
        // 这个警告就是写了 template,但是没有使用含有编译的版本,或者两者都没有写
        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')
    
      let updateComponent
      // 在dev环境上是更多做了性能埋点相关的处理,当性能比较卡顿时,可以利用这些东西,看文档就行,跳过
      /* 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)
        }
      }
    
      // 这个函数就是调用了 vm._update,第一个参数是通过 vm._render渲染出来一个vnode, 第二个参数理解为 false 就可以了
      // 之后,调用 new Watcher 这里实际上是 渲染 watcher
      // 因为 watcher 这个东西其实是跟响应式原理强相关的一个类
      // 它实际上就是一个观察者模式,它其实有很多自定义 watcher,也会有一个叫渲染 watcher
      // 调用 new Watcher 的的时候,三个参数,第一个vm, 第二个 updateComponent函数, 第三个 noop(空函数), 第四个配置对象,第五个布尔值
      // 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
      new Watcher(vm, updateComponent, noop, {
        before () {
          if (vm._isMounted && !vm._isDestroyed) {
            callHook(vm, 'beforeUpdate')
          }
        }
      }, true /* isRenderWatcher */) // 注意这里第5个参数是 true, 表示是一个渲染watcher
      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
        callHook(vm, 'mounted')
      }
      return vm
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 进入 Watcher 的定义,在 src/core/observer/watcher.js 中
      /**
       * A watcher parses an expression, collects dependencies,
      * and fires callback when the expression value changes.
      * This is used for both the $watch() api and directives.
      */
      export default class Watcher {
        vm: Component;
        expression: string;
        cb: Function;
        id: number;
        deep: boolean;
        user: boolean;
        lazy: boolean;
        sync: boolean;
        dirty: boolean;
        active: boolean;
        deps: Array<Dep>;
        newDeps: Array<Dep>;
        depIds: SimpleSet;
        newDepIds: SimpleSet;
        before: ?Function;
        getter: Function;
        value: any;
      
        constructor (
          vm: Component,
          expOrFn: string | Function,
          cb: Function,
          options?: ?Object,
          isRenderWatcher?: boolean // 是否是渲染 watcher
        ) {
          this.vm = vm
          if (isRenderWatcher) {
            vm._watcher = this
          }
          vm._watchers.push(this) // 收集watcher
          // 这里忽略这个options
          // options
          if (options) {
            this.deep = !!options.deep
            this.user = !!options.user
            this.lazy = !!options.lazy
            this.sync = !!options.sync
            this.before = options.before
          } else {
            this.deep = this.user = this.lazy = this.sync = false
          }
          this.cb = cb
          this.id = ++uid // uid for batching
          this.active = true
          this.dirty = this.lazy // for lazy watchers
          this.deps = []
          this.newDeps = []
          this.depIds = new Set()
          this.newDepIds = new Set()
          this.expression = process.env.NODE_ENV !== 'production'
            ? expOrFn.toString()
            : ''
          // 注意这里,这里就是调用方传进来的 updateComponent
          // parse expression for getter
          if (typeof expOrFn === 'function') {
            this.getter = expOrFn
          } else {
            this.getter = parsePath(expOrFn)
            if (!this.getter) {
              this.getter = noop
              process.env.NODE_ENV !== 'production' && warn(
                `Failed watching path: "${expOrFn}" ` +
                'Watcher only accepts simple dot-delimited paths. ' +
                'For full control, use a function instead.',
                vm
              )
            }
          }
          this.value = this.lazy
            ? undefined
            : this.get()
        }
      
        // 这里有依赖收集,相关的
        /**
         * Evaluate the getter, and re-collect dependencies.
        */
        get () {
          pushTarget(this)
          let value
          const vm = this.vm
          try {
            value = this.getter.call(vm, vm) // 这里会调用 getter, 也就是上层调用方传进来的 updateComponent 方法,就会执行方法内部的 update
          } catch (e) {
            if (this.user) {
              handleError(e, vm, `getter for watcher "${this.expression}"`)
            } else {
              throw e
            }
          } finally {
            // "touch" every property so they are all tracked as
            // dependencies for deep watching
            if (this.deep) {
              traverse(value)
            }
            popTarget()
            this.cleanupDeps()
          }
          return value
        }
      
        /**
         * Add a dependency to this directive.
        */
        addDep (dep: Dep) {
          const id = dep.id
          if (!this.newDepIds.has(id)) {
            this.newDepIds.add(id)
            this.newDeps.push(dep)
            if (!this.depIds.has(id)) {
              dep.addSub(this)
            }
          }
        }
      
        /**
         * Clean up for dependency collection.
        */
        cleanupDeps () {
          let i = this.deps.length
          while (i--) {
            const dep = this.deps[i]
            if (!this.newDepIds.has(dep.id)) {
              dep.removeSub(this)
            }
          }
          let tmp = this.depIds
          this.depIds = this.newDepIds
          this.newDepIds = tmp
          this.newDepIds.clear()
          tmp = this.deps
          this.deps = this.newDeps
          this.newDeps = tmp
          this.newDeps.length = 0
        }
      
        /**
         * Subscriber interface.
        * Will be called when a dependency changes.
        */
        update () {
          /* istanbul ignore else */
          if (this.lazy) {
            this.dirty = true
          } else if (this.sync) {
            this.run()
          } else {
            queueWatcher(this)
          }
        }
      
        /**
         * Scheduler job interface.
        * Will be called by the scheduler.
        */
        run () {
          if (this.active) {
            const value = this.get()
            if (
              value !== this.value ||
              // Deep watchers and watchers on Object/Arrays should fire even
              // when the value is the same, because the value may
              // have mutated.
              isObject(value) ||
              this.deep
            ) {
              // set new value
              const oldValue = this.value
              this.value = value
              if (this.user) {
                const info = `callback for watcher "${this.expression}"`
                invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
              } else {
                this.cb.call(this.vm, value, oldValue)
              }
            }
          }
        }
      
        /**
         * Evaluate the value of the watcher.
        * This only gets called for lazy watchers.
        */
        evaluate () {
          this.value = this.get()
          this.dirty = false
        }
      
        /**
         * Depend on all deps collected by this watcher.
        */
        depend () {
          let i = this.deps.length
          while (i--) {
            this.deps[i].depend()
          }
        }
      
        /**
         * Remove self from all dependencies' subscriber list.
        */
        teardown () {
          if (this.active) {
            // remove self from vm's watcher list
            // this is a somewhat expensive operation so we skip it
            // if the vm is being destroyed.
            if (!this.vm._isBeingDestroyed) {
              remove(this.vm._watchers, this)
            }
            let i = this.deps.length
            while (i--) {
              this.deps[i].removeSub(this)
            }
            this.active = false
          }
        }
      }
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      • 98
      • 99
      • 100
      • 101
      • 102
      • 103
      • 104
      • 105
      • 106
      • 107
      • 108
      • 109
      • 110
      • 111
      • 112
      • 113
      • 114
      • 115
      • 116
      • 117
      • 118
      • 119
      • 120
      • 121
      • 122
      • 123
      • 124
      • 125
      • 126
      • 127
      • 128
      • 129
      • 130
      • 131
      • 132
      • 133
      • 134
      • 135
      • 136
      • 137
      • 138
      • 139
      • 140
      • 141
      • 142
      • 143
      • 144
      • 145
      • 146
      • 147
      • 148
      • 149
      • 150
      • 151
      • 152
      • 153
      • 154
      • 155
      • 156
      • 157
      • 158
      • 159
      • 160
      • 161
      • 162
      • 163
      • 164
      • 165
      • 166
      • 167
      • 168
      • 169
      • 170
      • 171
      • 172
      • 173
      • 174
      • 175
      • 176
      • 177
      • 178
      • 179
      • 180
      • 181
      • 182
      • 183
      • 184
      • 185
      • 186
      • 187
      • 188
      • 189
      • 190
      • 191
      • 192
      • 193
      • 194
      • 195
      • 196
      • 197
      • 198
      • 199
      • 200
      • 201
      • 202
      • 203
      • 204
      • 205
      • 206
      • 207
      • 208
      • 209
      • 210
      • 211
      • 212
      • 213
      • 214
      • 215
      • 216
      • 217
      • 218
      • 219
      • 220
      • 221
      • 222
      • 223

总结下 $mount

  • 1 ) 在含有 compiler 版本中,先对 el 做一些处理
  • 2 ) 在没有定义 render 函数的时候,尝试获取一下 render 函数
    • 也就是说,把整个template通过一系列的逻辑判断,也是因为它支持很多很多种写法
      • 可以直接写 template
      • 也可以直接 template 是个dom对象
      • 如果不写 templete 的话,通过 el 的 outHTML 来获取这个 templete
    • 把这个template 通过这个编译的手段也转化成这个render函数
    • 也就是说整个 $mount 在这个带compiler版本的前提,要拿到这个render函数
  • 3 ) 然后就会调用这个 mountComponent 的这个方法
    • 这个方法其实很简单,就是定义了 updateComponent 这个函数
  • 4 ) 这个函数它实际上被用到渲染 watcher 里面,为什么要通过 watcher 呢?
    • 是因为这个 updateComponent 这个方法,实际上执行了一次真实的渲染
    • 这个渲染过程,除了我们首次,之后再更新数据的时候,还是会触发这个渲染watcher
    • 再次执行这个updateComponent方法,它是一个监听到执行的这样一个过程
    • 当我们的数据发生变化,它的更新入口也是这个 updateComponent 方法
    • 这就是渲染 watcher所要做的事情
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/98150
推荐阅读
相关标签
  

闽ICP备14008679号