Vue.javascript源码分析(三)基础篇模板渲染el、emplate、render属性详解

冬天地上扑的是雪,厚厚的,软软的;房上落的是雪,白皑皑的,又松又软;树上盖的是雪,积雪把树枝压弯了腰。太阳照在雪山上,发出耀眼的光芒。

Vue有三个属性和模板有关,官网上是这样解释的:

el     ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

template  ;一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

render   ;字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode

简单说一下,就是:

  Vue内部会判断如果没有render属性则把template属性的值作为模板,如果template不存在则把el对应的DOM节点的outerHTML属性作为模板,经过一系列正则解析和流程生成一个render函数,最后通过with(this){}来执行。

  也就是说template的优先级大于el。

  render的参数是Vue内部的$createElement函数(位于4486行),它的可扩展性更强一些,在一些项目的需求中,可以用很简单的代码得到一个模板。例如Vue实战9.3里介绍的例子,有兴趣可以看看

render可以带3个参数,分别如下:

tag      ;元素的标签名,也可以是组件名 data     ;该VNode的属性,是个对象 children     ;子节点,是个数组其中参数2可以省略的,在4335行做了修正,最后执行_createElement()函数,如下:

function createElement (  //第4335行
  context,
  tag,
  data,
  children,
  normalizationType,
  alwaysNormalize
) {
  if (Array.isArray(data) || isPrimitive(data)) {     //如果data是个数组或者是基本类型
    normalizationType = children;
    children = data;                                      //修正data为children
    data = undefined;                                     //修正data为undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE;
  }
  return _createElement(context, tag, data, children, normalizationType)     //最后执行_createElement创建一个虚拟VNode
}

本文Vue.javascript源码分析(三)基础篇模板渲染el、emplate、render属性详解到此结束。年轻时代是培养习惯、希望及信仰的一段时光。小编再次感谢大家对我们的支持!

标签: javascript Vue