当前位置: 首页 > 工具软件 > Runtime.JS > 使用案例 >

vue.js与vue.runtime.js区别

慕容修伟
2023-12-01

1.两个版本分别叫什么

vue.js:完整版
vue.runtime.js:只包含运行时版

2.如何引入

  • bootcdn引入:复制script标签粘贴到html中即可引入
  • npm安装vue: $ npm install vue
  • 使用命令行工具 (CLI)引入,默认引入非完整版,引入完整版需要配置
  • 使用webpack引入vue默认引入非完整版,引入完整版需要配置

3.两个版本的区别

a.功能上的区别:
  • 完整版:同时包含编译器和运行时的版本。
  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
b. 体积上区别:

运行时版本没有编译器因此相比完整版体积要小大约 30%

c.使用上的区别

1.完整版可以直接从html文件中获取html元素
例如将html中的{{n}}变成1可以这么写:

<div id="app">
   {{ n }}
</div>
new Vue({
  el:"#app",
  data:{n:1}
})

2.完整版还可以直接从template中获取html元素
例如:将html中的{{n}}变成1可以这么写:

new Vue({
   el:"#app"
   data:{n:1}
   template:`
   <div>
   {{ n }}
   </div>
`
})

3.非完整版将html写在vue文件中通过vue-loader打包变成h函数再通过render渲染就可以渲染视图
例如在runtime版本下将页面中的n变成2
先在vue文件中写入下面代码

<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

<script>
export default {
    data(){
        return {n:2}
    },
    methods:{
        add(){
            this.n+=1
        }
    }
}
</script>

<style scoped>
.red{
    color: red;
}
</style>

在main.js中引入上面的vue文件,运行$ yarn serve页面上就会出现一个数字2

import Vue from 'vue'
import Demo from "./demo.vue"
Vue.config.productionTip = false
new Vue({
  el:"#app",
  render(h){
   return h(Demo)
  }
})

4. template和render的区别

  • 通过上面的两个例子我们可以知道template是在完整版vue中使用的,template后面是html标签,vue可以通过compiler解读这些标签。
  • render是渲染函数,
new Vue({
render:(createElement){
   return createElement(Demo)
    },
})$mount("#app")

非完整版由于没有compiler不能从template或者html文件中获取html具体内容所以我们单独写个vue文件再让vue-loader 编译成render能看懂的代码,从而实现页面渲染。
render一般用于非完整版(完整版也可以用,template和render不能混用否则有一个会失效)作用是用来渲染vue文件打包后的内容。

5. 怎么用codesandbox.io 创建一个Vue项目

  • google 搜索codesandbox.io
  • 点击页面中</> Start coding for free
  • 选择vue文件,点击就创建了一个简单的vue项目。
 类似资料: