Error in render: "ReferenceError

代码如下：

    computed: {
        columns: function () {
            let columns = [];
            switch (this.tab) {
                case "1":
                    return [
                        {
                            label: "name",
                            prop: "name",
                            width: 260,
                        },
                        {
                            label: "gender",
                            prop: "gender",
                            formatter: (row, column, cellValue, index) => {
                                const value =
                                    cellValue &&
                                    ["男", "女"][cellValue];
                                const stateClass = [
                                    "status_error",
                                    "status_success",
                                ][cellValue];
                                return (
                                    <span class={status_success}>{value}</span>
                                );
                            },
                        },
                    ];
                    break;        
                default:
                    columns = [
                        {
                            label: "company",
                            prop: "company",
                            width: 260,
                        },
                        {
                            label: "status ",
                            prop: "status",
                            formatter: (row, column, cellValue, index) => {
                                const value =
                                    cellValue &&
                                    ["经营中", "已关闭"][cellValue];
                                const stateClass = [
                                     "status_success",
                                    "status_warning"
                                ][cellValue];
                                return  <span class={stateClass}>{value}</span>;
                            },
                        },
                    ];
                    break;
            }
            return columns;
        },
    },

h未定义？h是啥？其实就是createElement函数的别名，具体可以看这里：vue中render: h => h(App)的理解。

另外一个页面columns formatter也是这么写的，没问题呀。

等下，不能createElement？是不是this没有绑定上？果然，在<span>标签的时候就报错了。

对比了另一个正确展示的页面，发现columns是写在data里的，而这组件columns需要根据props动态生成，就写在computed里面了。难道是这个影响了？提到data里试一下吧。

一试真的吓一跳，oooooook了，页面展示正确了！！！！！

后来终于找到了原因：data是成员函数，所以会把h注入，而像methods,computed这些都只是对象，不会注入h。具体解释见：ReferenceError: h is not defined。

h is not defined

但是,如果vue用的是3.4以上的版本(本项目中用的是2.6.12)，我一开始的写法就没问题，因为method and getter 已经自动注入h了。详情见 h-auto-injection。

auto-injection