最近开发 Vue 项目遇到的一些坑和学到的小 tips

[yuqingc]

这些东西是最近工作的一个小总结，比较杂。这些知识可能大家都已经知道了，或者百度一下都有。但是还是想和大家分享一下

1. Vue 中的 watch(val, oldVal) 的 val 和 oldVal 一样？

我写的一个组件中的 data 有以下结构，但是我想监听 form 里面的某个 key 比如 a 的变化

export default {
  // ...
  data () {
    return {
      form: {
        a: '',
        b: '',
      }
    }
  },
  // ...
  watch: {
    form: {
      deep: true,
      handler: function (val, oldVal) {
        if (val.a !== oldVal.a) {
          // 居然 val.a 和 oldVal.a 永远相等
          // 从而走不到这一步
        }
      }
    }
  }
}

但是，打印出来的 val 和 oldVal 始终相等。因为 val 和 oldVal 指向同一个对象，即使内部的 field 发生了变化，这两个变量永远指向同一个对象，所以获取的值都是一样的。再 Vue 的官方文档也说了

那如何解决呢，其实 Vue 提供了一个简单的办法。这样就可以了。

watch: {
  'form.a': function (val, oldVal) {}
}

感悟：和 React 对比： 再 React.js 中，监听状态的改变，以 prop 为例，一般是在 componentWillReceiveProps 或者 static getDerivedStateFromProps 中。有经验的 React 开发者，在对一个对象 state 改变，并且调用 setState 的时候，会使用 immutable data (不可变数据)。例如，要往一个数组中 push 一个新的 item，首先要将这个数组进行深拷贝，然后在新数组中 push 一个新的值，最后用这个新的数组来 setState，从而保证 state 的纯净和不可变性。当然，可以借助一些第三方库，例如 immutable.js 来保证 state 的不可变性。这个设计理念和 Vue 的完全不同。Vue 通过侵入了 set 方法来达到更新状态的目的。不能说谁好谁坏，这只是两者的设计理念不同。我个人还是比较喜欢 React 的状态处理的方式，它会使数据流和状态的改变更为清晰和透明，setState 是唯一改变 state 的入口（Hooks 除外）。

2. 滚动窗口，定位

旧的写法，主动调用动画，scrollTop 值，或者设置 location.hash 来设置滚锚点位置。其实还可以使用 element.scrollIntoView()。这个函数内置了支持动画平滑滚动

但是这个函数被表为实验阶段，有些老的浏览器不支持。

3. 获取剪切版中粘贴的图片

可以给 element 的 paste 事件绑定函数。代码示例如下

function handlePaste (e) {
  const clipboardItems = e.clipboardData.items
  let file = null
  for (let i = 0; i < clipboardItems.length; i++) {
    if (clipboardItems[i].kind === 'file') {
      file = clipboardItems[i].getAsFile()
      this.handleUploadFile(file)
      break
    }
  }
}

具体可以参考 文档。通过这个 API，可以实现自定义对剪切版粘贴的内容（包括文字、文件）进行操作。