Vue3报“Maximum recursive updates exceeded. This means you have a reactive effect ... mutating”解决方法

    今天使用组件时报了这个错误，寻找了半天，发现原来标签的ref属性与标签名相同时，利用ref()函数获取DOM节点时会报递归依赖错误，如下面这段代码：

<template>
    <view class="root">
        <!--    number标签名=ref属性值，通过ref()函数获取DOM将报递归依赖错误 -->
        <number ref="number"></number>
    </view>
</template>
​
<script setup>
    import { ref } from 'vue';
    //  定义虚拟DOM节点
    const number = ref()
</script>

解决方案：

        不要让标签ref属性值与标签名相同即可