Vue 两种版本区别

2021-11-25 282 阅读2分钟

1、版本历史

读法类view，是MVC中的V，M和C在Vue里被简化，重点是V。

2015年 1.0版使用MVVM
2016年 2.0版不完全是MVVM了，是MV*
2019年 2.6版
2020年 3.0版

2、Vue两种版本区别

Vue有两个版本，一个是完整版，一个是运行时版

最佳实践： 总是使用非完整版，然后配合vue-loader和vue文件。

思路：

保证用户体验，用户下载的JS文件体积更小，但只支持h函数；

保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数，vue-loader把vue文件里的HTML转为h函数。

相关说明

如果引用错了js文件会怎样？

vue.js错用成了vue.runtime.js：无法将HTML编译成视图
vue.runtime.js错用成vue.js：代码体积变大，因为vue.js有编译HTML功能。

vue-loader问题

vue-loader会将.vue的内容翻译成h构建方法变成一个对象，但这样做HTML就只有一个#div.app，SEO（搜索引擎优化）不友好，因此在HTML里把title、description、keyword、h1、a写好即可

2、template 和 render 怎么用

完整版的视图是写在HTML里或template选项的，由于有 compiler(编译器)的存在，完整版运行时，用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

非完整版的视图是写在render里的，是用h函数来创建标签。非完整版运行时，当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。我们在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

template版, 引入vue.js

new window.Vue({
  el: "#app",
  template: `
    <div @click="add">{{n}} <button>+1</button></div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

render版, 引入vue.runtime.js

new window.Vue({
  el: "#app",
  render(h){
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

4、使用在线Vue

CodeSandbox是一个免费的在线代码编辑器，主要聚焦于创建 Web 应用项目。当前已经进化为可以同时支持浏览器端以及服务端的 web 应用进入网页codesandbox.io或者直接点击这里