Vue3开发日记

最近用vue3开发大屏，记录一些知识难点。

先放一个大屏辅助技术的链接：

介绍 | DataVVue 大屏数据展示组件库http://datav.jiaminghi.com/guide/关于VUE3结合typescript的：

1、组件结构变化之setup

export default defineComponent({
    setup() {
        const loading = ref([]);
        onMounted(() => {
           findLogList();
       });  
        return {
            loading
        }
    }
})

所有的代码逻辑都写在setup方法中。变量或者方法需要通过return出去，不然无法在模版中使用。

setup方法处于beforeCreate和created生命周期之间。

data和methods是在created周期之后才能使用。

setup只能同步不能异步。

defineComponent只是对setUp进行封装，是为了在typescript下给参数正确的类型推断。

2、关于相应数据ref()和reactive（）

ref定义基本数据类型ref(10）——结果是一个对象，使用.value获取值

reactive定义被包裹住的复杂数据类型reactive（{name: 10}）——结果是一个变量

3、使用datav图表时，数据无法渲染上去。

解决办法：this.data = { ...this.data };

因为dataV框架无法deep改变复杂data中数据

感谢：

vue3之组件结构(defineComponent,setup函数)_stars的博客-CSDN博客_definecomponent