Vue 使用中的小技巧(5)

日期：2020-05-11 栏目：程序人生浏览：次

7.1 用 preserveWhitespace 减少文件体积

有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：

<ul>
 <li>1111</li><li>2222</li><li>333</li>
</ul>

当然还有其他方式，比如设置字体的 font-size: 0 ，然后给需要的内容单独设置字体大小，目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。

{
 vue: {
 preserveWhitespace: false
 }
}

它的作用是阻止元素间生成空白内容，在 Vue 模板编译后使用 _v(" ") 表示。如果项目中模板内容多的话，它们还是会占用一些文件体积的。例如 Element 配置该属性后，未压缩情况下文件体积减少了近 30Kb。

7.2 使用 transformToRequire 再也不用把图片写成变量了

以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件。

<template>
 <div>
 <avatar :default-src="DEFAULT_AVATAR"></avatar>
 </div>
</template>
<script>
 export default {
 created () {
  this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
 }
 }
</script>

其实通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件

{
 vue: {
 transformToRequire: {
  avatar: ['default-src']
 }
 }
}

于是我们代码就可以简化不少

<template>
 <div>
 <avatar default-src="./assets/default-avatar.png"></avatar>
 </div>
</template>

在 vue-cli 的 webpack 模板下，默认配置是：

transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
}

可以举一反三进行一下类似的配置

vue-loader 还有很多实用的 API 例如最近加入的自定义块，感兴趣的各位可以去文档里找找看。

8. render 函数

在某些场景下你可能需要render 渲染函数带来的完全编程能力来解决不太容易解决的问题，特别是要动态选择生成标签和组件类型的场景。

8.1 动态标签

1. 一般情况

比如根据props来生成标签的场景

<template>
 <div>
 <div v-if="level === 1"> <slot></slot> </div>
 <p v-else-if="level === 2"> <slot></slot> </p>
 <h1 v-else-if="level === 3"> <slot></slot> </h1>
 <h2 v-else-if="level === 4"> <slot></slot> </h2>
 <strong v-else-if="level === 5"> <slot></slot> </stong>
 <textarea v-else-if="level === 6"> <slot></slot> </textarea>
 </div>
</template>

转载注明出处：http://www.heiqu.com/171.html

Vue 使用中的小技巧(5)

相关推荐