vue-cli

Question

绿色注释掉的 和 render写到的有什么不同。有些时候两个出来的效果完全一样，有些时候效果有差异！？

Answer 1

组件的写法有几种：

1. template化组件。使用字符串做模板，简单的模板情况下可以用此方案，复杂一定的，在字符串内些html很痛苦。

2. template分离组件。分离模板到html内，好处是html和js分离，坏处是组件代码不是一体化的

3. 单文件组件vue。这个是vue最推荐的，组件代码一体化，并且html和js分离，坏处是必须webpack等打包工具，需要复杂的依赖和配置。

4. render函数化组件。依赖最少，带上代码无法体会html的描述型魅力

都是可以的。其中第四个是最基础的，前面的集中都会首先通过vue-loader预处理成第四种。它们各有优点缺点。
想要看懂以上内容，需要你懂得这四种模式的样本，所以，需要先看：

https://segmentfault.com/a/11...

Answer 2

template和render差别确实不大。从源码的“web-runtime-with-compiler.js”文件里我们可以窥探到。
程序优先检查render，找不到就查看是否有tempalte，再其次检查el属性从html文件里读区。
template是html模版，编译以后就成render函数了。代码运行的时候也会先把template编译成render，然后再用来渲染dom。
还有就是可以编写jsx的模版文件，用工具编译成render函数。
需要注意的是vue.runtime.js是不包含complier的，不能使用template，只能用render。vue.standalone.js才包含complier。

if (!options.render) {//没有render查看tempalte
    let template = options.template
    let isFromDOM = false
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          isFromDOM = true
          template = idToTemplate(template)
        }
      } else if (template.nodeType) {
        isFromDOM = true
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {//没有template 查看el
      isFromDOM = true
      template = getOuterHTML(el)
    }

至于components和前两者差异就大了。这里会被当子组件处理。

Answer 3

差异很细微，使用 render 的话，可以节省掉 Vue 的编译过程。这个编译过程可能是在 build 的时候完成的，所以对于最终的发布文件，应该是没有差异，或者仅仅是函数名、参数名之类的差异。

其他应该没有差异吧，特别是效果方面，应该没有差异。