【Vue.js源码解析 三】-- 模板编译和组件化

前言

笔记来源:拉勾教育 大前端高薪训练营
阅读建议:建议通过左侧导航栏进行阅读

模板编译

  • 模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)

      <div> 
          <h1 @click="handler">titleh1> 
          <p>some contentp> 
      div>
    
  • 渲染函数 render

      render (h) { 
          return h('div', [ 
              h('h1', { on: { click: this.handler} }, 'title'), 
              h('p', 'some content') 
          ]) 
      }
    
  • 模板编译的作用

    • Vue 2.x 使用 VNode 描述视图以及各种交互,用户自己编写 VNode 比较复杂
    • 用户只需要编写类似 HTML 的代码 - Vue 模板,通过编译器将模板转换为返回 VNode 的 render 函数
    • .vue 文件会被 webpack 在构建的过程中转换成 render 函数

体验模板编译的结果

  • 带编译器版本的 Vue.js 中,使用 template 或 el 的方式设置模板

      <div id="app">
          <h1>Vue<span>模板编译过程span>h1>
          <p>{{ msg }}p>
          <comp @myclick="handler">comp>
      div>
      <script src="../../dist/vue.js">script>
      <script>
          Vue.component('comp', {
              template: '
    I am a comp
    '
    }) const vm = new Vue({ el: '#app', data: { msg: 'Hello compiler' }, methods: { handler () { console.log('test') } } }) console.log(vm.$options.render)
    script>
  • 编译后 render 输出的结果

      (function anonymous() { 
      	with (this) { 
      		return _c( "div", { 
      			attrs: { id: "app" } }, 
      			[ 
      				_m(0), 
      				_v(" "), 
      				_c("p", [_v(_s(msg))]), 
      				_v(" "), 
      				_c("comp", { on: { myclick: handler } }), 
      			],
      			1 
      		); 
      	} 
      });
    
  • _ccreateElement() 方法,定义的位置 instance/render.js 中_

  • 相关的渲染函数(_开头的方法定义),在 instance/render-helps/index.js 中

    • src/core/instance/render-helps/index.js
      // 创建文本 Vnode
      target._v = createTextVNode
      // 处理静态内容
      target._m = renderStatic
    
    • src/core/vdom/vnode.js
      export function createTextVNode (val: string | number) {
          return new VNode(undefined, undefined, undefined, String(val))
      }
    
    • src/core/instance/render-helps/render-static.js
      /**
       * Runtime helper for rendering static trees.
       */
      export function renderStatic (
      	index: number,
      	isInFor: boolean
      ): VNode | Array<VNode> {
          const cached = this._staticTrees || (this._staticTrees = [])
          let tree = cached[index]
          // if has already-rendered static tree and not inside v-for,
          // we can reuse the same tree.
          if (tree && !isInFor) {
              return tree
          }
          // otherwise, render a fresh tree.
          tree = cached[index] = this.$options.staticRenderFns[index].call(
              this._renderProxy,
              null,
              this // for render fns generated for functional component templates
          )
          markStatic(tree, `__static__${index}`, false)
          return tree
      }
    
  • 把 template 转换成 render 的入口 src\platforms\web\entry-runtime-with-compiler.js

Vue Template Explorer

  • vue-template-explorer

  • Vue 2.6 把模板编译成 render 函数的工具

  • vue-next-template-explorer

  • Vue 3.0 beta 把模板编译成 render 函数的工具

模板编译过程


  • 解析、优化、生成

编译的入口

  • src\platforms\web\entry-runtime-with-compiler.js

      Vue.prototype.$mount = function (
      	// el: 创建 vue 实例时,传入的选项
      	el?: string | Element,
       	// 非 SSR 情况下为 false,SSR 时为 true
       	hydrating?: boolean
      ): Component {
      	......
          // 把 template 转换成 render 函数
          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
      	......
      }
    
  • 调试 compileToFunctions() 执行过程,生成渲染函数的过程

    • compileToFunctions: src\compiler\to-function.js

    • complie(template, options):src\compiler\create-compiler.js

    • baseCompile(template.trim(), fifinalOptions):src\compiler\index.js

    【Vue.js源码解析 三】-- 模板编译和组件化_第1张图片

解析 - parse

  • 解析器将模板解析为抽象语树 AST,只有将模板解析成 AST 后,才能基于它做优化或者生成代码字符串。

    • src/compiler/index.js
      // 把模板转换成 ast ,即 抽象语法树
      // 抽象语法树,用来以树形的方式描述代码结构
      const ast = parse(template.trim(), options)
    
    • src/compiler/parser/index.js
      parse()
    
  • 查看得到的 AST tree

    astexplorer

  • 结构化指令的处理

    • v-if 最终生成单元表达式

    • src/compiler/parser/index.js

      // structural directives
      // 结构化的指令
      // v-for
      processFor(element)
      processIf(element)
      processOnce(element)
    
    • src/compiler/codegen/index.js
      export function genIf (
      	el: any,
      	state: CodegenState,
      	altGen?: Function,
      	altEmpty?: string
      ): string {
          el.ifProcessed = true // avoid recursion
          return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
      }
      // 最终调用 genIfConditions 生成三元表达式
    
  • v-if 最终编译的结果

      ƒ anonymous( 
      ) {
          with(this){ 
              return _c('div',{attrs:{"id":"app"}},[ 
                  _m(0), 
                  _v(" "), 
                  (msg)?_c('p',[_v(_s(msg))]):_e(),_v(" "), 
                  _c('comp',{on:{"myclick":onMyClick}}) 
              ],1) 
          } 
      }
    

    v-if/v-for 结构化指令只能在编译阶段处理,如果我们要在 render 函数处理条件或循环只能使用js 中的 if 和 for

  • 注册全局组件,示例如下:

      Vue.component('comp', { 
      	data: () { 
          	return { 
          		msg: 'my comp' 
      		} 
      	},
      	render (h) { 
          	if (this.msg) { 
                  return h('div', this.msg) 
              }
          	return h('div', 'bar') 
      	} 
      })
    

优化 - optimize

  • 优化抽象语法树,检测子节点中是否是纯静态节点

  • 一旦检测到纯静态节点,例如:

    hello整体是静态节点


    永远不会更改的节点

    • 提升为常量,重新渲染的时候不在重新创建节点
    • 在 patch 的时候直接跳过静态子树
    • src/compiler/index.js
      if (options.optimize !== false) {
          // 优化抽象语法树
          optimize(ast, options)
      }
    
    • src/compiler/optimizer.js
      /**
       * Goal of the optimizer: walk the generated template AST tree
       * and detect sub-trees that are purely static, i.e. parts of
       * the DOM that never needs to change.
       *
       * Once we detect these sub-trees, we can:
       *
       * 1. Hoist them into constants, so that we no longer need to
       *    create fresh nodes for them on each re-render;
       * 2. Completely skip them in the patching process.
       */
      export function optimize (root: ?ASTElement, options: CompilerOptions) {
          if (!root) return
          isStaticKey = genStaticKeysCached(options.staticKeys || '')
          isPlatformReservedTag = options.isReservedTag || no
          // first pass: mark all non-static nodes.
          // 标记静态节点
          markStatic(root)
          // second pass: mark static roots.
          // 标记静态根节点,指的是 标签中包括子标签,并且没有动态内容,即纯文本内容
          markStaticRoots(root, false)
      }
    

生成 - generate

  • 把优化后的 AST 转换成字符串形式的代码

    • src/compiler/index.js
      const code = generate(ast, options)
    
    • src/compiler/codegen/index.js
      export function generate (
      	ast: ASTElement | void,
      	options: CompilerOptions
      ): CodegenResult {
          // 创建代码生成过程中使用的状态对象
          const state = new CodegenState(options)
          const code = ast ? genElement(ast, state) : '_c("div")'
          return {
              // 对应 AST 对象生成的 VNode 代码的字符串形式
              render: `with(this){return ${code}}`,
              staticRenderFns: state.staticRenderFns
          }
      }
    
  • src/compiler/to-function.js

      // 把字符串转换成函数
      function createFunction (code, errors) {
          try {
              return new Function(code)
          } catch (err) {
              errors.push({ err, code })
              return noop
          }
      }
    

总结

【Vue.js源码解析 三】-- 模板编译和组件化_第2张图片

组件化机制


  • 组件化可以让我们方便的把页面拆分成多个可重用的组件

  • 组件是独立的,系统内可重用,组件之间可以嵌套

  • 有了组件可以像搭积木一样开发网页

  • 下面我们将从源码的角度来分析 Vue 组件内部如何工作

    • 组件实例的创建过程是从上而下
    • 组件实例的挂载过程是从下而上

组件声明

  • 复习全局组件的定义方式

      Vue.component('comp', { 
          template: '

    hello

    '
    })
  • Vue.component() 入口

    • 创建组件的构造函数,挂载到 Vue 实例的 vm.options.component.componentName = Ctor
    • src/core/global-api/index.js
      // 注册 Vue.directive()、 Vue.component()、Vue.filter() 
      initAssetRegisters(Vue)
    
    • src/core/global-api/assets.js
      if (type === 'component' && isPlainObject(definition)) { 
          definition.name = definition.name || id 
          definition = this.options._base.extend(definition) 
      }
      ……
      // 全局注册,存储资源并赋值 
      // this.options['components']['comp'] = Ctor 
      this.options[type + 's'][id] = definition
    
    • src/core/global-api/index.js
      // this is used to identify the "base" constructor to extend all plain- object // components with in Weex's multi-instance scenarios. 
      Vue.options._base = Vue 
    
    • src\core\global-api\extend.js
      Vue.extend()
    
    • 组件构造函数的创建
      Vue.extend = function (extendOptions: Object): Function {
          ......
      	// 创建组件构造函数
          const Sub = function VueComponent (options) {
              // 调用 _init() 初始化
              this._init(options)
          }
      
          // 原型继承自 Vue
          Sub.prototype = Object.create(Super.prototype)
          Sub.prototype.constructor = Sub
          Sub.cid = cid++
          // 合并 options
          Sub.options = mergeOptions(
              Super.options,
              extendOptions
          )
          Sub['super'] = Super
      
          // For props and computed properties, we define the proxy getters on
          // the Vue instances at extension time, on the extended prototype. This
          // avoids Object.defineProperty calls for each instance created.
          if (Sub.options.props) {
              initProps(Sub)
          }
          if (Sub.options.computed) {
              initComputed(Sub)
          }
      
          // allow further extension/mixin/plugin usage
          Sub.extend = Super.extend
          Sub.mixin = Super.mixin
          Sub.use = Super.use
      
          // create asset registers, so extended classes
          // can have their private assets too.
          ASSET_TYPES.forEach(function (type) {
              Sub[type] = Super[type]
          })
          // enable recursive self-lookup
          // 把组件构造函数保存到 Ctor.options.components.comp = Ctor
          if (name) {
              Sub.options.components[name] = Sub
          }
          ......
      }
    
    • 调试 Vue.component() 调用的过程
      <div id="app"> 
      div> 
      <script src="../../dist/vue.js">script> 
      <script> 
          const Comp = Vue.component('comp', { 
              template: '

    I am a comp

    '
    }) const vm = new Vue({ el: '#app', render (h) { return h(Comp) } })
    script>

组件创建和挂载


组件 VNode 的创建过程

  • 创建根组件,首次 render() 时,会得到整棵树的 VNode 结构

  • _整体流程:new Vue() --> $mount() --> vm._render() --> createElement() --> createComponent()

  • 创建组件的 VNode,初始化组件的 hook 钩子函数

    • src/core/vdom/create-element.js
      // 1. _createElement() 中调用 createComponent()
      else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
          // 查找自定义组件构造函数的声明
          // 根据 Ctor 创建组件的 VNode
          // component
          vnode = createComponent(Ctor, data, context, children, tag)
      } 
    
    • src/core/vdom/create-component.js
      // 2. createComponent() 中调用创建自定义组件对应的 VNode
      export function createComponent (
      	Ctor: Class<Component> | Function | Object | void,
      	data: ?VNodeData,
      	context: Component,
      	children: ?Array<VNode>,
      	tag?: string
      ): VNode | Array<VNode> | void {
          if (isUndef(Ctor)) {
              return
          }
      
          ......
      
          // install component management hooks onto the placeholder node
          // 安装组件的钩子函数 init/prepath/insert/destory
          // 准备好了 data.hook 中的钩子函数
          installComponentHooks(data)
      
          // return a placeholder vnode
          const name = Ctor.options.name || tag
          // 创建自定义组件的 VNode,设置自定义组件的名字
          // 记录 this.componentOptions = componentOptions
          const vnode = new VNode(
              `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
              data, undefined, undefined, undefined, context,
              { Ctor, propsData, listeners, tag, children },
              asyncFactory
          )
      
          // Weex specific: invoke recycle-list optimized @render function for
          // extracting cell-slot template.
          // https://github.com/Hanks10100/weex-native-directive/tree/master/component
          /* istanbul ignore if */
          if (__WEEX__ && isRecyclableComponent(vnode)) {
              return renderRecyclableComponentTemplate(vnode)
          }
      
          return vnode
      }
    
      // 3. installComponentHooks() 初始化组件的 data.hook
      function installComponentHooks (data: VNodeData) {
          const hooks = data.hook || (data.hook = {})
          // 用户可以传递自定义钩子函数
          // 把用户传入的自定义钩子函数和 componentVNodeHooks 中预定义的钩子函数合并 
          for (let i = 0; i < hooksToMerge.length; i++) {
              const key = hooksToMerge[i]
              const existing = hooks[key]
              const toMerge = componentVNodeHooks[key]
              if (existing !== toMerge && !(existing && existing._merged)) {
                  hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
              }
          }
      }
    
      // 4. 钩子函数定义的位置(init()钩子中创建组件的实例)
      // inline hooks to be invoked on component VNodes during patch
      const componentVNodeHooks = {
          init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
          if (
              vnode.componentInstance &&
              !vnode.componentInstance._isDestroyed &&
              vnode.data.keepAlive
              ) {
                  // kept-alive components, treat as a patch
                  const mountedNode: any = vnode // work around flow
                  componentVNodeHooks.prepatch(mountedNode, mountedNode)
              } else {
                  const child = vnode.componentInstance = createComponentInstanceForVnode(
                      vnode,
                      // 当前组件对象的父组件对象
                      activeInstance 
                  )
                  child.$mount(hydrating ? vnode.elm : undefined, hydrating)
              }
          },
      
          prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
              ......
          },
      
      	insert (vnode: MountedComponentVNode) {
      		......
      	},
      
      	destroy (vnode: MountedComponentVNode) {
      		......
      	}
      }
    
      // 5 .创建组件实例的位置,由自定义组件的 init() 钩子方法调用
      export function createComponentInstanceForVnode (
      	// we know it's MountedComponentVNode but flow doesn't
      	vnode: any,
      	// activeInstance in lifecycle state
      	parent: any
      ): Component {
          const options: InternalComponentOptions = {
              _isComponent: true, // 当前是组件
              _parentVnode: vnode, // 当前创建好的 VNode 对象,用来占位
              parent               // 当前组件对象的父组件对象
          }
          // check inline-template render functions
          // 获取 inline-template
          //  xxxx 
          const inlineTemplate = vnode.data.inlineTemplate
          if (isDef(inlineTemplate)) {
              options.render = inlineTemplate.render
              options.staticRenderFns = inlineTemplate.staticRenderFns
          }
          // 创建组件实例
          return new vnode.componentOptions.Ctor(options)
      }
    
  • 调试执行过程

组件实例的创建和挂载过程

  • Vue._update() --> patch() --> createElm() --> createComponent()

    • src/core/vdom/patch.js
      // 1. 创建组件实例,挂载到真实 DOM
      function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
          let i = vnode.data
          if (isDef(i)) {
              const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
              if (isDef(i = i.hook) && isDef(i = i.init)) {
                  // 调用 init() 方法,创建和挂载组件实例
                  // init() 的过程中,创建好了组件的真实 DOM,挂载到了 vnode.elm 上
                  i(vnode, false /* hydrating */)
              }
              // after calling the init hook, if the vnode is a child component
              // it should've created a child instance and mounted it. the child
              // component also has set the placeholder vnode's elm.
              // in that case we can just return the element and be done.
              if (isDef(vnode.componentInstance)) {
                  // 调用钩子函数(VNode的钩子函数初始化属性/事件/样式等,组件的钩子函数)
                  initComponent(vnode, insertedVnodeQueue)
                  // 把组件对应的 DOM 插入到父元素中
                  insert(parentElm, vnode.elm, refElm)
                  if (isTrue(isReactivated)) {
                      reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
                  }
                  return true
              }
          }
      }
    
      // 2. 调用钩子函数,设置局部作用于样式
      function initComponent (vnode, insertedVnodeQueue) {
          if (isDef(vnode.data.pendingInsert)) {
              insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
              vnode.data.pendingInsert = null
          }
          vnode.elm = vnode.componentInstance.$el
          if (isPatchable(vnode)) {
              invokeCreateHooks(vnode, insertedVnodeQueue)
              setScope(vnode)
          } else {
              // empty component root.
              // skip all element-related modules except for ref (#3455)
              registerRef(vnode)
              // make sure to invoke the insert hook
              insertedVnodeQueue.push(vnode)
          }
      }
    
      // 3. 调用钩子函数
      function invokeCreateHooks (vnode, insertedVnodeQueue) {
          // 调用 VNode 的钩子函数
          for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, vnode)
          }
          i = vnode.data.hook // Reuse variable
          // 调用组件的钩子函数
          if (isDef(i)) {
              if (isDef(i.create)) i.create(emptyNode, vnode)
              if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
          }
      }
    

你可能感兴趣的:(VueJs,vue)