vue2转vue3中会遇到的一些问题

echarts

echarts图表窗口大小改变时报错

• 错误信息：Cannot read properties of undefined (reading 'type')

• 产生原因：在窗口大小发生变化时，需要执行this.chart.resize()动态调整图表的大小。但是vue3中使用proxy的方式监听响应式，this.chart会被在vue内部转换成响应式对象，从而在resize 的时候获取不到。

• 解决方法：实例化echart时不做响应式

• 示例：

const chart = ref(echarts.init(barChartDiv.value, 'macarons')) //报错
const chart = echarts.init(barChartDiv.value, 'macarons') //不报错

vue2转vue3遇到的一些差异

props

// setup时，不需要导入，可以直接使用
<script setup>
    const props = defineProps({
        className: {
            type: String,
            default: 'chart'
        }
    })
    console.log(props.className) //不需要像响应式对象一样.value
</script>

官方文档：https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

refs

<p ref="p">hello</p>

• vue2写法：this.$refs.p

• vue3写法：const p = ref() //是的没错，就是这样写，变量名要和ref值一样

官方文档：https://cn.vuejs.org/api/built-in-special-attributes.html#ref

生命周期

内容较多：直接丢官网文档了 https://cn.vuejs.org/api/composition-api-lifecycle.html

计算属性

• vue3写法：

const he = computed(()=>{
    return 100
})