一、Vue 的两个版本

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

完整版：同时包含编译器和运行时的版本，编译器就是用来将模板字符串编译成为 JavaScript 渲染函数的代码

运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切

二、两个版本的区别

	Vue 完整版	运行时版	评价
特点	有 compiler（编译器）	没有 compiler	compiler 占40%体积
视图	写在 HTML 里，或者写在 template 选项	写在 render 函数里，用 h 创建标签	h 是写好传给 render 的
cdn 引入	vue.js	vue.runtime.js	文件名不同，生产环境后缀为 .min.js
webpack 引入	需要配置 alias	默认使用此版	尤雨溪配置的
@vue/cli 引入	需要额外配置	默认使用此版	尤雨溪、蒋豪群配置的

最佳选择:使用运行时版，然后配合 vue-loader 和 vue 文件

思路：

对于用户来说，运行时版可以保证用户体验，下载的 JS 文件体积更小，但只支持 h 函数

对于开发者来说，只能写 h 函数的话，开发体验不好，如果有 compiler, 开发者就能写更直观更语义化的 HTML 标签和 template, 所以我们需要一个 compiler

Vue-loader 就可以引入 compiler, 把 Vue 文件里的 HTML 标签和 template 在构建时预编译成 h 函数，同时满足用户和开发者的需求

三、template 和 render 的用法

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

template 标签和 JS 里的 template

//vue文件中的template标签<template><div id="app">      {{n}}<button @click="add">+1</button>   </div> </template>//js中的templatetemplate : `<div id="app">      {{n}}<button @click="add">+1</button>   </div> `

render 函数

// 运行时版在 js 中构建视图render(h){return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])}// 运行时版使用 vue-loader// 先创建一个demo.vue文件，在里面构建视图import demo from "./Demo.vue"new Vue({el: "#app",render(h) {return h(demo)}})

四、使用 codesandbox.io 在线写 Vue 代码

在线写 Vue 代码，无需任何本地的安装依赖

网址：https://codesandbox.io/

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

浅析 Vue 的两个版本相关推荐

vue 2个方法先后执行_浅析Vue的2个版本
一.@vue/cli用法安装 npm npm install -g @vue/cli yarn yarn global add @vue/cli 安装完成后可以使用 vue create 来创建一个 ...
vue保存内容到本地_Vue两个版本区别
1.两个版本对应的文件名完整版: vue.js ; vue.min.js 非完整版: vue.runtime.js : vue.runtime.min.js 完整版有体积更大,因为有compiler ...
vue mxgraph渲染xml页面_Vue的两个版本
Vue.js分为两个版本,简单来说就是一个是完整版vue.js,一个是非完整版vue.runtime.js: 1. HTML的书写位置不同完整版: 完整版的HTML书写的位置有两个,一个是直接在 * ...
目标检测实战：4种YOLO目标检测的C++和Python两种版本实现
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达作者丨nihate 审稿丨邓富城编辑丨极市平台导读本文作者使用C++编写一套基于OpenCV的Y ...
ubuntu下如何安装两个版本OpenCV？
本文首发于微信公众号「3D视觉工坊」--ubuntu下如何安装两个版本OpenCV? 前言由于在VSLAM技术研究过程中,经常会涉及OpenCV不同版本在ubuntu系统下的安装.因此小凡在此简单总 ...
python2和python3分别是python的两个版本_Windows下Python2与Python3两个版本共存的方法详解...
前言一向用Python 3,最近研究微信公众号开发,各云平台只支持Python 2.7,想用其他版本需要自己搭建环境.而网上又搜不到Python 3开发微信公众号的资料.暂打算先使用Python 2 ...
git 比较两个版本之间的区别
查看当前没有add 的内容修改 git diff 查看已经add 没有commit 的改动 git diff --cached 查看当前没有add和commit的改动: git diff HEAD 或 ...
windows安装两个版本JDK
1 . 准备两个版本的jdk我的两个jdk路径为: D:\jdk1.7.0_80 D:\Program Files\Java\jdk1.8.0_111 2 . 设置两个子JAVA_HOME,一个总设 ...
在一个IIS上同时运行两个版本ASP.NET报错的
在Windows 2003 server IIS 6.0上运行一个ASP.NET 2.0网站时出现报错: 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 ...

浅析 Vue 的两个版本

一、Vue 的两个版本

二、两个版本的区别

三、template 和 render 的用法

四、使用 codesandbox.io 在线写 Vue 代码

浅析 Vue 的两个版本相关推荐

最新文章

热门文章