开发中千万不要轻视空格

积跬步 至千里

简单例子

开发中由于自己的格式代码方式有问题，可能一不小心加了空格 ，有些加空格可能不受影响，但有些时候加空格就会出现失效，导致错误。

<template>
<div>
 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</div>
   
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
};
</script>

以下是一个最简单的dialog 弹框，效果图如下 ：

出现BUG了

很久没有动的代码，竟然被报了bug，原因是 底部的按钮没了效果类似如下：

此时的代码

<span slot="footer " class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>

说实话第一眼我没注意出来，就自己受用注释写了一遍，发现就好了，左看右看，右看左看，是 空格 惹的祸，slot 名称 footer 加了空格，所以名称匹配不上，就显示不出footer。

空格真的会惹来大麻烦

问题排查，是同事替代吗格式化问题，导致加了很多的空格，包括类名 监听的方法名 slot ref 等，测试了一下 class  方法名 后面加空格没受影响，但是 slot ,都受到了影响

所以没必要的空格 不管是哪都不要加了 ，特别是类似Id ref slot 需要精确匹配的更要注意。