Vue源码分析之-入口文件分析

最新推荐文章于 2024-05-07 01:35:50 发布

懒得跟猪打架

最新推荐文章于 2024-05-07 01:35:50 发布

阅读量377

点赞数

分类专栏： Vue.js框架从入门到放弃文章标签： vue.js 前端 javascript 前端框架 ecmascript

本文链接：https://blog.csdn.net/u011024243/article/details/125643639

版权

Vue.js框架从入门到放弃专栏收录该内容

12 篇文章 0 订阅

订阅专栏

入口文件：

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

通过查看源码解决下面的问题

观察以下代码，通过阅读源码，分析回答在页面上输出的结果。

const vm = new Vue({
    el: '#app',
    template: '<h1>{{msg}} from template </h1>',
    render(h) {
        return h('h1', this.msg + 'from render functions') 
    },
    data() {
        return {
            msg: 'Welcome to Vue World'
        }
    }
})

问题是：同时设置template和render函数，最后接轨会渲染什么呢？

接下来带着问题我们来看一下入口文件的源码。

/* @flow */

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'

const idToTemplate = cached(id => {
  const el = query(id)
  return el && el.innerHTML
})

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  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 <html> or <body> - 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')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      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')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

Vue.compile = compileToFunctions

export default Vue

忽略条件判断的内部实现细节，针对我们问题的目标进行分析，代码可以简化为下面的内容。

Vue.prototype.$mount = function (
  el?: string | Element,
  // 非ssr情况下为false，ssr的时候为true
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  // el 不能是 html 或者 body
  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
  }

  const options = this.$options
  // resolve template/el and convert to render function
  // 把 template/el 转换为 render 函数
  if (!options.render) {
    // STATEMENT CODE
  }
  // 调用 mount 方法，渲染DOM
  return mount.call(this, el, hydrating)
}

从简化后的代码，我们可以很容易的看出来，如果我们的vue实例在创建是传入了render函数的话，if(!options.render){//...} 这部分条件判断false，里面的代码不会起作用。

所以，使用new Vue(options)创建vue实例时传了render函数的vue实例最终渲染现实的应该是由render函数创建的虚拟DOM的内容。

调试当前文件中定义的Vue.prototype.$mount()函数实在什么时候被调用的

调试前准备：

修改dev的命令开启--sourcemap，方便我们调试时能看到我们的src代码。
执行npm run dev，构建vue.js, 并生成vue.js.map文件
在index.html文件中修改vue.js的文件引用为当前构建生成的vue.js的路径

开始调试

使用live server打开浏览器运行index.html文件。

打开开发者工具，点击source标签，点击打开src/platforms/web/entry-runtime-with-compiler.js文件，并在Vue.prototype.$mount定义的代码内的某个位置设置断点。

刷新页面，让代码运行到断点位置。查看当前的callstack。

我们可以看到，执行栈由下而上是依次运行的顺序：

运行index.html内的匿名函数中执行new Vue(options) 操作
触发预先定义的Vue函数，Vue函数是在src/core/instance/index.js文件中定义的。
Vue函数中调用其私有成员函数_init()
_init()函数内部调用了Vue.$mount()方法

所以，通过设置断点查看代码运行到断点位置时的执行栈，就可以看出Vue.$mount()是在什么时候被调用的。

调试过程一些注意要点总结：

el不能是html或者body标签
如果没有render，把template转换成render函数
如果有render方法，直接调用mount挂载DOM

调试的过程步骤：

设置断点。

查看callstack调用堆栈，理解方法之间的调用关系和执行时机。

结论：如果我们设置了render函数，不管我们有没有template，都会直接来调用mount这个方法。mount方法执行完毕过后，界面上就会渲染出render方法中写的内容。

遗留问题：

Vue函数的构造函数在哪里？
Vue实例的成员/Vue的静态成员是从哪里来的？

懒得跟猪打架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue源码分析之-入口文件分析

问题是：同时设置template和render函数，最后接轨会渲染什么呢？结论：如果我们设置了render函数，不管我们有没有template，都会直接来调用mount这个方法。mount方法执行完毕过后，界面上就会渲染出render方法中写的内容。...
复制链接

扫一扫