如何将带状态缓存的对象处理器传入Vue组件并修复v-on报错

• 本次报错TypeError: Cannot read property 'apply' of undefined的核心触发原因，是你在自定义handler对象上，把内部方法命名为get和set。这两个名称是JS原生Object.defineProperty定义访问器属性时的关键字，同时也是Vue2响应式系统劫持对象属性时使用的核心标识。
• Vue2在处理props传入的对象时，会递归遍历对象所有属性，通过Object.defineProperty将原数据属性替换为带依赖收集、派发更新能力的访问器属性。当遍历到名为get/set的属性时，原属性存储的函数引用会被响应式的访问器描述符意外覆盖，最终导致后续读取handler.set时拿到的值是undefined。JS在对非函数值执行调用逻辑时，会尝试读取目标的apply方法，进而抛出上述报错。
• 你目前模板渲染正常，是因为模板中getPickerValue方法在渲染阶段读取过handler.get属性，响应式系统在依赖收集过程中保留了这个属性的原函数引用；但handler.set在事件触发前从未被主动读取，原函数引用已被覆盖为undefined，因此在change事件回调中调用时直接抛错。
• 代码中写的get/set普通方法依赖隐式的this指向，未做固定上下文绑定，这属于潜在的逻辑隐患，一旦在调用过程中this指向丢失，即使解决了命名冲突的问题，也会出现状态缓存失效的问题。

• 第一，调整handler内部方法的命名，避开get/set这类与响应式系统逻辑冲突的关键字，换成业务语义明确的普通命名，从根源上避免描述符劫持的冲突。
• 第二，给handler内部的方法做固定上下文绑定，不依赖运行时的this指向逻辑，保证状态缓存的稳定性。

修复后的核心代码示例：

item: {
  type: Object,
  default() {
    return {
      options: [{ text: 'op1' }, { text: 'op2' }],
      handler: {
        current: 0,
        // 替换命名，避开冲突
        getIndex() {
          return this.current
        },
        setIndex(value) {
          this.current = value
        },
      }
    }
  },
},
methods: {
  handlePickerChange(value, item) {
    // 同步更新调用的方法名
    item.handler.setIndex(value)
  },
  getPickerValue(item) {
    // 同步更新调用的方法名
    return item.handler.getIndex()
  },
}

如果必须保留get/set的命名，需要手动固定方法的this绑定，并通过Object.freeze标记handler对象跳过Vue的响应式劫持（代价是失去handler内部状态的响应性，状态更新后不会触发视图重渲染，不推荐使用）。

内容的提问来源于stack exchange，提问作者Mashiro