1.边框重叠问题

如图，两个input框纵向紧密排列，相邻的边框靠在一起但没有重叠，视觉效果就是边框不对称，中间的边框看起来很粗，很奇怪。

如果直接隐藏上面input的下边框或者下面input的上边框虽然默认状态下是可以解决问题的，但当input框处于:hover状态时，边框会高亮，隐藏边框的地方高亮就会缺失，看起来更奇怪了。为了避免“露馅”，一个很巧妙的方法是通过设置box-shadow来模拟边框的样式。

input {
    border-top: 0;

    &:hover,
    &:focus {
        box-shadow: 0 -1px 0 0 #0364ff;
    }
}

实现效果如下图：

2.vue文件引入外部css文件的作用域问题

vue文件中的script标签以及style标签都可引入外部css文件：

<script setup lang="ts">
    import './css1.scss'
</script>

<style lang="scss" src="./css1.scss"></style>

如上代码，import方式导入的话默认是全局引入的，如果只想组件在内部生效可以使用CSS Modules，使用起来比较麻烦。

style标签默认也是全局引入的，如果只想组件在内部生效可以添加scoped关键字，相对import的方式更加方便。

3.el-table横线问题

使用el-table组件并且开启固定列时，固定列地步可能会出现多一条异常横线的问题，可通过调用表格组件的doLayout方法或者添加以下样式解决：

<style>
  .el-table__fixed-right {
    height: 100% !important;
 }
</style>

4.el-table滚动条位置重置（丢失）问题

如上图的场景，在一个抽屉中会显示多个“子页面”，包括列表页、编辑页、查看页。默认显示列表页，通过v-show控制显示不同页面。列表页中使用了el-table组件显示一个数据列表，当表格中数据较多时，会显示竖向滚动条，此时如果点击显示其他页面然后再切回列表页时，el-table组件会重新渲染，滚动条位置会重置到顶部，原有位置丢失。一个解决方法是，在切换其他页面前获取当前滚动条位置，然后切换回列表页时再恢复滚动条位置：

  // 获取滚动条位置
  public getListScrollHeight() {
    let bodyWrapper = table.querySelector('.el-table__body-wrapper')
    this.saveListScrollHeight = bodyWrapper ? bodyWrapper.scrollTop || 0
  }

  // 恢复滚动条位置
  public recoverListScrollHeight() {
    table.doLayout()

    let bodyWrapper = table.$el.querySelector('.el-table__body-wrapper')
    if (bodyWrapper) {
      this.$nextTick(() => {
        bodyWrapper.scrollTop = this.saveListScrollHeight
      })
    
      table.doLayout()
    }
  }

另外需注意对于表格数据tableData，如果直接赋值新的数组数据或动态添加/删除数据，滚动条位置都不会丢失，但如果先赋空数组[]，再赋值新数据，滚动条位置也会丢失。

5.js中的事件传播

js中事件传播分为3个阶段

• 捕获阶段（Capture Phase）：事件从Window对象向下传递到目标元素（触发事件的元素）
• 目标阶段（Target Phase）：事件到达目标元素
• 冒泡阶段（Bubbling Phase）：事件从目标元素开始向上冒泡，直到最外层的DOM元素（Window对象）。

addEventListener方法的第三个参数默认为false，指事件会在冒泡阶段触发，若设置为true，事件将会在捕获阶段触发。因此对于这样一个场景，如需要在全局监听click事件并调用事件处理函数handleClick，如果用默认方式添加事件的话，handleClick会在click事件的冒泡阶段调用，但系统中其它元素也可能会绑定click事件，甚至还可能会用stopPropagation方法阻止事件的冒泡，这会导致全局绑定的handleClick不会被触发。这种场景下可以设置全局添加的click事件在捕获阶段触发，从而避免因调用stopPropagation导致阻止事件冒泡。

6.vue指令相互覆盖问题

有两个vue2项目a, b；a项目被构建为sdk，b项目作为一个业务项目引入了a项目sdk。碰到了这样一个问题：a项目中用了一个指令v-move，并且自己有实现，b项目中有一个同名的指令，在实际应用过程中发现，b项目中的组件触发v-move指令时，有时候触发的是a中的代码，有时候触发的是b中的代码。

造成这个问题的原因主要是两个项目中的指令都是全局注册的，而两个项目共用的是同一个全局Vue，因此在指令注册时可能会互相覆盖。

为避免这个问题可以采取以下方法：

• 指令改为局部注册
• 尽可能避免指令重名

7.vue2中this的指向

之前写过一篇博客介绍了关于vue2+vue-property-decorator项目中组件this的指向问题，其中讲到VueComponent组件实例对象是在类实例对象的基础上初始化的，所以针对多个组件实例，VueComponent组件实例对象肯定是不同的，而类实例对象理应是相同的。

但是如上图所示，对于两个组件实例，List类实例对象并不相同，和以前的推断不太一样，推测是vue-property-decorator的缘故，以后有时间再深入研究一下。