开发避坑指南(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.columnslet 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}},},