1 Vue的两个版本

分别是完整版(vue.js)和只包含运行时版本(vue.runtime.js）

Vue完整版

• 完整版同时包含编译器(compiler)和运行时(runtime)，编译器(compiler)占总体积的40%
• 视图写在HTML或者 template 选项中。
• 使用时，需要引入 vue.min.js
• webpack 引入时，需要配置alias，同时在 @vue/cli 引入时，需要额外配置

Vue非完整版（runtime）

• 运行时版本中没有编译器（compiler）
• 视图写在 render 函数里，用 h 来创建标签，h 可以替换成任意字母，但一般默认使用h
• 使用时，需要引入 vue.runtime.min.js
• webpack 和 @vue/cli 均默认使用非完整版

版本区别

最佳实践

总是使用非完整版，搭配 vue-loader 引入compiler

• 保证用户体验，用户下载的JS文件更小，但只支持h函数
• 保证开发体验，在通过vue-loader 引入编译器（compiler）后，开发者可以直接在vue文件里写HTML标签，而不写h函数，由 vue-loader 负责将 vue 文件里的HTML转换成h函数

2 template和render的用法

// 完整版，需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不完整版，不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• 完整版与非完整版中 template 的不同
  完整版

// index.html 文件
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

非完整版

// main.js 文件
new Vue({
  el: '#app',
  template: `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `
  data: {
    n: 0
  }
})

使用 render 函数

// runtime 版在js中构建视图
  render(h){ 
       return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
   }

// 创建demo.vue文件，构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

3 SEO友好

SEO 不友好

SEO即搜索引擎优化，运行过程就是搜索引擎不停的 curl，并根据 crul 的结果（html页面涉及内容）猜测页面内容。因此，如果页面都是用JS创建 div，用 crul 命令就无法得到页面主要内容，返回结果中无法得知页面涉及内容，称作SEO不友好。

解决方法

给 crul 一些内容即可，把 title、description、keyword、h1、a 等写好，让 crul 能得到页面的信息，SEO 就能正常工作。

4 codesandbox.io的使用

JavaScript线上沙箱环境，通俗而言就是前端代码的在线编辑器，支持各种不同的框架。
开发地址：https://codesandbox.io/