开发避坑指南(22)：Vue3响应式编程中this绑定机制与解决方案

错误信息

TypeError: Cannot read properties of undefined (reading 'find')
TypeError: r.vnode.el.querySelector is not a function

报错背景

vue2项目升级到vue3后，原来的代码报错。

报错代码

  computed: {
    /** 计算列的显示与隐藏*/
    columnVisible() {
      return function (prop) {
        this.columns
        let col = this.columns.find(p => p.prop === prop)
        return !!col ? col.visible : true
      }
    },
  },

错误分析

从错误信息看，报错的代码在：let col = this.columns.find(p => p.prop === prop)这一行。在 Vue 2 升级到 Vue 3 的过程中，箭头函数和普通函数的上下文绑定差异是常见问题。在vue3环境中，箭头函数自动绑定当前上下文（this），而普通函数会丢失 Vue 实例的 this 引用，导致无法通过this来引用相关函数就会报上述错误。

解决办法

将普通函数修改箭头函数，使用箭头函数保持 this 绑定，代码修为如下：

  computed: {
    /** 计算列的显示与隐藏*/
    columnVisible() {
      return (prop)=> {
        let col = this.columns.find(p => p.prop === prop)
        return !!col ? col.visible : true
      }
    },
  },