Vue完整版和运行时版

1.完整版：vue.js

• 完整版同时包括编译器(compiler) 和 运行时(runtime)
• 编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码

• 运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能

  2.运行时版本：vue.runtime.js

• 只包含运行时版就只有运行时，没有编译器，无法实时转换html

两个版本的区别

1. 对于用户来说，非完整版 （即runtime版）体积小，用户体验好，但只支持h函数
2. 对于程序员来说，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能写更直观更语义化的HTML标签和template, 所以我们需要一个compiler
3. vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都高兴

最佳实践是使用 非完整版，然后用vue-loader引入compiler

template 和 render 的用法

• 完整版 VS 运行版中： ```javascript // 需要编译器 new Vue({ template: ‘
  {{ hi }}
  ‘ //该参数将会插入到Vue所对应的html元素中 })

// 不需要编译器 new Vue({ render (h) { return h(‘div’, this.hi) } })

- vue文件的template标签 **VS** js中的template：
```javascript
//vue文件中的template标签
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>
//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

• 纯js构建视图 VS 使用Vue单文件组件： ```javascript //不完整版在js中构建视图 render(h){

   return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])

  }

//不完整版使用vue-loader

//先创建一个demo.vue文件，在里面构建视图 import demo from “./demo.vue” new Vue({ el: “#app”, render(h) { return h(demo) } })

<a name="CE6Y9"></a>
# 使用非完整版+Vue-loader：
- **Vue单文件组件：**
   - 新建：src/Demo.vue文件内容：<br />1.视图：<template><br />2.视图以外的其他选项：<script><br />3.CSS：<style scoped>
   - **vue loader可以把Demo.vue变成一个对象**
```javascript
<template>
    <div class="red">
        <!-- 视图：HTML标签 -->
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
<script>
export default {
    // 视图之外的其他选项，JS内容
    data(){
                                     //vue loader写的data必须是函数
        return {
            n:0
        }
    },
    methods:{
        add(){
            this.n += 1
        }
    }
}
</script>
<style scoped>
/* CSS内容 */
.red{
    color: red;
}
</style>

• main.js引入文件
  引入的Demo对象中含有：data、methods、render等属性和方法
  而其中render的作用：把template标签的内容翻译成h构造方法 ```javascript import Demo from ‘./Demo.vue’ new Vue({ el:’#app’, //插入渲染的页面位置 render(h){ return h(Demo) } })

``` 总之，当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript，最终打好的包里实际上是不需要编译器compiler的

快速使用在线Vue实例

我们可以在codesandbox里在线写Vue的代码，不用任何本地的安装依赖
https://codesandbox.io/s/boring-sanderson-7ozng?file=/src/main.js