浅析Vue完整版和运行时版

289 阅读1分钟

在Vue的版本版本中,有vue.jsvue.runtime.js两个版本。根据官方文档的解释,vue.js为完整版,vue.runtime.js为只包含运行时版。

一般最佳实践就是使用运行时版,然后配合vue-loadervue文件。

两个版本的主要特点在于,完整版包含了编译器(complier),而运行时版没有包含编译器。

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

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

视图:完整版卸载HTML里或template选项里,运行时版写在render函数里,用h来创建标签

template和render

如果运行时版使用了template属性,会报错。

[Vue warn] : You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这时候需要把template代码放到vue文件中,变成函数以后,再render这个函数。

new Vue({
	el:"#app",
	render: h => h(vue文件名)
})

3.使用codesandbox.io写Vue

  • 点击按钮之后,进入创建沙盒页面,按照下图方式点击,即可创建vue应用