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

作者：Monodyee | 2024-02-17 00:15:42

踩

$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