handleMallCatergoryChange () { if (this.mallCatergoryCode.length != 0) { let arr = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels console.log('mallCatergoryCode', this.mallCatergoryCode) console.log('arr', arr) } } 把该代码改为vue3

在Vue3中，可以使用`ref`来获取DOM元素的引用，而不是`$refs`。因此，可以将原始代码中的`this.$refs['cascaderMallCatergory']`替换为`cascaderMallCatergoryRef.value`。另外，在Vue3中，事件需要使用`.native`修饰符来监听原生事件，因此可以将`@change`事件修改为`@change.native`。修改后的Vue3代码如下：

<template>
  <div>
    <el-cascader v-model="mallCatergoryCode" :options="options" ref="cascaderMallCatergory" @change.native="handleMallCatergoryChange" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Example',
  setup() {
    const cascaderMallCatergoryRef = ref(null);
    const options = [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
          },
          {
            value: 'fangan',
            label: '设计方案',
          },
        ],
      },
      {
        value: 'zujian',
        label: '组件',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              {
                value: 'layout',
                label: 'Layout 布局',
              },
              {
                value: 'color',
                label: 'Color 色彩',
              },
            ],
          },
        ],
      },
    ];
    const mallCatergoryCode = ref([]);
    
    function handleMallCatergoryChange() {
      if (mallCatergoryCode.value.length !== 0) {
        const arr = cascaderMallCatergoryRef.value.getCheckedNodes()[0].pathLabels;
        console.log('mallCatergoryCode', mallCatergoryCode.value);
        console.log('arr', arr);
      }
    }
    
    return {
      cascaderMallCatergoryRef,
      options,
      mallCatergoryCode,
      handleMallCatergoryChange,
    };
  },
};
</script>