Vue完整版和运行时版的区别

灰儿 · 2022-8-3 23:55:44

一、完整版和运行版的名字区别
可以去BootCDN里面引用，进去后直接搜索 Vue 即可。 BootCnd官网完整版的后缀是 —— vue.js 运行版的后缀多了个runtime —— vue.runtime.js 所有版本都有压缩版，压缩版功能一致，只是体积相对要小 —— 版本.min.js

二、template和render的使用方法
template

完整版可以直接在HTML里面或者在template选项中直接写代码。它会自动解析

例如：

在index.jhtml中添加一个id为app的标签

1
2
<div id="app"></div>
复制代码
接着添加script标签，引入完整版的js文件

1
2
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
复制代码
然后在main.js里，直接把html代码写入template选项中

1
2
3
4
5
6
7
8
9
10
new Vue({
el: '#app',
template: `
      <div>{{n}}</div>
`,
data: {
      n: 0
}
})
复制代码
运行Vue后，它会直接把n为0写入到app标签中

render

运行版，需要将HTML标签写入render中，让render来写入html中

例如：

在index.jhtml中添加一个id为app的标签

1
2
<div id="app"></div>
复制代码
接着添加script标签，引入运行版的js文件

1
2
<script scr="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"><script>
复制代码
然后在main.js里，用render函数来创建标签

1
2
3
4
5
6
7
8
9
10
new Vue({
el: '#app',
render(h){
      return h('div', this.n)
},
data: {
      n: 0
}
})
复制代码
运行Vue后，达到完整版一样的效果

完整版包含编译器，比起运行时版本多了3000多行代码，体积大，效率低
运行时版本不包含编译器，所以体积小，效率高
区别
在完整版可以使用template模板进行编译
在运行时版本使用template模板进行编译会报错，但是可以通过render函数来进行编译
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/vue.runtime.js"></script> // 运行时版本
</head>

<body>
<div id="app"></div>
<script>
      new Vue({
         el: '#app',
         // template: '<h1>{{ msg }}</h1>', // 此版本不支持template模板编译，需使用render函数进行编译
         render(h){
            return h('h1', this.msg)
         },
         data: {
            msg: 'Hello world'
         }
      })
</script>
</body>

</html>
vue-cli脚手架使用runtime.esm.js版本，也就是运行时版本且使用的是esm（es6）的模块化方式

		自动登录	找回密码
密码			注册

框架 Vue完整版和运行时版的区别

关注我们