vue完整版和非完整版的区别和用法

1.vue完整版和非完整版的区别

1

2、Vue完整版与非完整版的一些优劣：

完整版

优点：逻辑清晰简单，好写好用。

缺点：

（1）开发需要额外配置版本引用

（2）视图模板写在HTML/template里，代码量大的时候显得冗余。

（3）需要通过compiler解析器才能把HTML/template模板编译成Dom去渲染，意外增大代码体积

（4）代码体积较非完整版大30%，用户体验较差。

非完整版

缺点：对初级开发者可能不友好

优点：

（1）render*函数之强大，它较于HTML/template模板内要写繁琐冗余的代码而言要高效简洁很多，甚至还能在函数体里面进行一些额外的代码逻辑。

（2）不需要解析器，webpack等配置有vue loader，vue loader的作用是在代码打包的时候r调用compiler自动解析编译。

（写到这就有个疑问了，都是要借用工具解析编译，compiler占代码体积凭什么vue loader就不占用？

解答：占用代码体积指的是网页浏览时需要下载的代码体积，那这个网页是用Vue写的，浏览网页时肯定是要下载Vue，而compiler是属于Vue完整版代码的一部分。vue loader是打包工具的代码，浏览页面时是不用下载开发代码时用的打包工具的。打包工具就好比是一个志愿者，他用自带的属性帮你把非完整版写出来的Vue代码翻译成页面可读代码，那你就不用自己带一本compiler翻译书啦，怪重的。）

（3） 代码体积较小，提升用户体验。

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

1.1compiler

编译器，能够把写在HTML或者template里面的字符串代码模板编译成Dom节点的工具。

 1.2引入文件差异

完整版：

非完整版（用脚手架开发不用引，默认就有）：

1.3render函数

Vue实例中的渲染函数

newVue({render(h) {//const h = createElement;returnh('div',this.hi)  }})

new Vue({ render (h) { //const h = createElement; return h('div', this.hi) } })

2.vue完整版的用法

脚手架搭建的项目默认配置的是非完整版，所以要用完整版需要额外配置引用：

2

视图模板写在HTML或者template里:

{{n}}

new Vue({ el: '#app', template: `

{{n}}

`, data:{ n:0 } }

通过内部配置的compiler解析器解析成Dom节点渲染到页面：

3

3.vue非完整版的用法

只支持在render函数中创建视图模板：

4

4.用codesandbox.io写vue代码

不需要登录，登录有数目限制，只能创建50个项目，不登录可以创建无数个

4.1创建一个vue

5

4.2将写好的vue文件保存到本地

选择左上角的file——然后Export to ZIP

6