Vue完整版本和运行版本的理解

白境
401 阅读3分钟

前言

今天在学习Vue2的时候，了解到了Vue提供了两个构建版本完整版(同时包含编译器和运行时的版本) 和 运行时(基本上就是除去编译器的其它一切)

两种版本区别表.png

完整版

  • 完整版是直接从HTML里得到视图，操作方式为直接从CDN引用Vue.js或Vue.min.js即可

  • 主要操作template和直接操作HTML文件

代码

// 需要编译器 
new Vue({ 
    template: '<div>{{ hi }}</div>' 
})
  • 直接把代码写进template或HTML文件里，Vue编译器会帮你做之后的事

优点

  • 对于开发者来说，十分友好，直接从HTML得到视图然后操作就行了

缺点

  • 体积大：完整版比运行时版本体积要多约40%

  • 对于用户来讲，下载的东西会更多，不利于用户体验

  • 不利于使用后续Vue的API

  • 理论上讲，配置Vue时默认配置就是运行时版本，也就代表Vue团队也更希望开发者用运行时版本进行开发

运行时版本

  • 运行时版本能保证用户体验，用户下载的js文件更小，但如果不用Vue-loader的话对于开发者来说会多一些工作量

  • 默认搭建Vue其实就是运行时版本，CDN引用vue.runtime.js或vue.runtime.min.js

代码

// 不需要编译器 
new Vue({ 
    render (h) { 
        return h('div', this.hi) 
    } 
})
  • 没有编译器就需要开发者自己把视图写在render函数里用h创建标签

优点

  • 体积小：用户体验好

  • 大多数人的选择，Vue团队希望你用的版本

缺点

  • SEO不友好，因为你不是直接把代码写在HTML里的需要后面把DOM渲染进页面里（把常规信息写在HTML里即可）

  • 很麻烦，要多写代码，增加工作量（可以使用Vue-loader，把脏活累活交给插件做）

  • Vue-loader是把你写的代码翻译成h构建方法，这样我们就可以把所有的代码写在Vue文件内，让插件翻译，完美解决问题

template的用法

  • 在用完整版时，把代码写在template里直接可以获取、操作DOM

  • 在用运行时版本时，这样操作会报错

render的用法

  • 在运行时版本时，要把代码写在render里，需要注意的是render是一个函数

  • render里的h，就代表你要把什么东西放进页面，h是约定俗成的名字，你可以自己改

  • 例如我把代码写在Demo.vue里，我需要把Demo.vue文件渲染到页面里

  • 我需要在js文件里获取到Demo.vue文件

  • 然后用el获取到DOM节点，申明函数render()

  • 让h函数返回Demo文件，剩下的事webPack会帮我们做

import Demo from './Demo.vue'
new Vue({
  el: '#app',
  render(h) {
    return h(Demo)
  },
})

codesandbox.io点击进入

  • 一个比js.bin强大十倍的网站，直接在这个网站里构建Vue、React、HTML、CSS、JS等文件

image.png

  • 可以在codesandbox里直接构建文件，下载到电脑上，如果你没有其他配置需求的话，这个操作会帮你省很多事

  • 缺点是需要搭梯子，不然会很慢

  • 效果如下

image.png

avatar
文章
阅读
粉丝