Vue 完整版与非完整版的区别和使用方法

Hyyy
598 阅读4分钟

在使用Vue的时候，分为两个版本

一个是完整版（vue.js）,

另一个是非完整版也叫运行时版本（vue.runtime.js）。

完整版：vue.js

内含compiler，编译器可以把试图上的html转成DOM节点，转成html中的内容，所以体积大，不建议用，是从HTML获得视图。

vue.js

vue.min.js

完整版的 html 的书写位置

完整版的 vue 的 html 书写位置有两个，一个是在 .html 文件中写 vue 对应的 xml 语法，如下：

<div>{{ hi }}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

另外一个 html 书写位置在 new Vue() 的构造选项里的 template: 变量 处写 vue 对应的 xml 语法，如下：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

当然了，因为是完整版，在引入 vue-loader 后完全可以按照非完整版书写 html 位置的方式写。唯一需要注意的是，在 new Vue() 构造选项中，template: 和 render() 只能出现一个。

优点：

​ 可以在 html 文件中直接写 Vue 语句，可读性强些

缺点：

  1. 体积比非完整版大

  2. 耦合性太大，在 html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大

非完整版：vue.runtime.js

非完整版中的html只是字符串，且不能从html中获取视图，但是可以通过webpack内的vue-loader,来调用pomliler,把其转成h()函数，用户下载的js文件体积变小了

vue.runtime.js

vue.runtime.min.js

优点：

  1. 体积小，非完整版的体积比完整版小了30%多

  2. 耦合性低，模块化强

缺点：

  1. 目前不知

template 和 render

VUE一般使用template来创建HTML，

然后在有的时候，

我们需要使用javascript来创建html，这时候我们需要使用render函数。

template----html的方式做渲染

templete是视图的内容，可以直接包含html内容，常直接放在视图层，用在完整版就直接把html显示在视图

先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？

　　img

  1. 有3种方法可以实现

　　　直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）

　　　 img

  1. 在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的div标签）

　　　img

  1. 若你不想额外增加一个div，此时应该使用template来实现（推荐）

　　img

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

　　　　 img

renderr----js的方式做渲染

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

vm中有一个方法_c,也是这个函数的别名。

render函数怎么用

 render:(h) => {
       return h('div',{
　　　　　//给div绑定value属性
         props: {
               value:''
          },
　　　　　　//给div绑定样式
　　　　　　style:{
　　　　　　　　width:'30px'
　　　　　　},　
　　　　　　//给div绑定点击事件　　
          on: {
             click: () => {
                   console.log('点击事件')
               }
        	 },

         })
}

总结

相同之处：

render 函数 跟 template 一样都是创建 html 模板

不同之处：

  • Template适合逻辑简单，render适合复杂逻辑。

  • 使用者template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。

  • render的性能较高，template性能较低。这一点我们可以看一下，下图中vue组件渲染的流程图可知。

  • 基于上一点，我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误

  • Render 函数的优先级要比template的级别要高，但是要注意的是Mustache(双花括号)语法就不能再次使用

如何用 codesandbox.io 写 Vue 代码

codesandbox.io/

创建vue项目即可

avatar
文章
阅读
粉丝