Vue 的版本区别

Vue 的两个版本

• vue.js
• vue.runtime.js

Vue 分为两个版本，一个是完全版，一个是runtime版，runtime 版比完全版少近40%的代码体积，因为 runtime 版省略了 Vue 的编译器，而完整版是有的，因为这个编译器，完整版可以直接在 HTML 上查看视图效果，或使用 template 渲染页面，runtime 版需要使用 render 函数进行渲染，当我们使用 webpack + vue-cli 创建项目时，默认使用的是 runtime 版，但我们可以通过配置 webpack ，将我们以完整版为标准写的代码，转换为 runtime 执行的形式，达到和完整版一样的效果

两个版本的 cdn 引入地址

cdn 地址： cdn.jsdelivr.net/npm/vue@2.6…

template 用法

template 是一个模板，可以替换 vue 中 el 对应的挂载点的内容

<div id="app">
	<abc></abc>
</div>


<script>
	let vm = new Vue({
		el: "#app",
		data: ()=>{
			return {
				message: "Hello World!!!"
			}
		},
		template: `<h1>{{message}}</h1>`
	});

</script>

render 用法

render 是 vue 的一个渲染函数，它是字符串模板的一种替代方法，在 runtime 版本中使用可以实现和完整版一样的字符串模板功能。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

在 codesandbox.io 上创建项目

codesandbox.io 是一个在线编辑器网站，可以在线上直接编写项目代码

当我们点击蓝色的创建项目按钮，点击新建 vue 项目，就可以开始编写 vue 项目了