vue中$watch的使用（解决RangeError: Maximum call stack size exceeded）

碰到的问题：

在一个需求中，对一个表单的更改需要做一个历史记录的功能，由于这个表单非常大（是对一篇文章进行编辑），所以不可能具体到某一个属性，所以采用了watch监听的方法，设置{deep: true}。然而，在预览的时候碰到了RangeError: Maximum call stack size exceeded的错误，经过一番排查，定位到是watch监听引起的，再具体的就不知道什么问题了。

即使业务代码什么也没有写，只是简单的console.log也不行。只要设置了deep: true就会报错，非常头疼。上网也没有找到类似的案例，又一想：既然错误就在watch这一块，那我是不是可以动态的监听与取消监听呢？上官网果然找到了答案：https://cn.vuejs.org/v2/api/#vm-watch

$watch基础使用(参考官网)

• vm.$watch( expOrFn, callback, [options] )
• 返回值为一个{Function} unwatch，返回一个取消观察函数，用来停止触发回调
• 选项：deep，深度监听
• 选项：immediate，是否立即执行一次

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
var unwatch = vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

// 取消监听
unwatch()

我的解决方案，供参考

// 在created的时候调用setWatchChapters，在其他情况下调用removeWatchChapters，具体根据业务情况来定
export default {
	...
	data () {
		return {
			unWatchChapters: null
		}
	},
	created(){
		this.setWatchChapters()
	},
	methods:{
		setWatchChapters () { // 设置对chapters的监听
			if (!this.unWatchChapters) { // 防止多次设置监听
				setTimeout(() => { // 还是有某些bug，所以使用setTimeout加入事件队列
					this.unWatchChapters = this.$watch('report.chapters', () => {
						// do something
					}, { deep: true })
				}, 0)
			}
    	},
    	removeWatchChapters () { // 取消对chapters的监听
			if (this.unWatchChapters) {
				this.unWatchChapters()
				this.unWatchChapters = null
			}
		}
	}
}

标签：vue,exceeded,watch,vm,deep,chapters,unWatchChapters,监听
来源： https://blog.csdn.net/qq_36404808/article/details/118540703