vue3+TypeScript+composition API踩坑记录

一、组件库

  我使用的是syncfusion的ej2组件库，不得不说这个组件库配合组合式api使用非常的方便，但这个库需要导入vue-class-component组件，vue-class-component已经被vue官方放弃了。

二、Vue组件注册

• Vue3中使用app.component("",{})全局注册组件\
• Vue2中使用Vue.component('', {})全局注册组件\
• Vue3在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

• Vue2导出components属性实现局部注册

import ComponentA from './ComponentA'  
import ComponentC from './ComponentC'  
  
export default {  
components: {  
"可自定组件名":ComponentA,  
"可自定组件名":ComponentC  
},  

}

这里就有第一个坑在Vue3在使用 <script setup> 的单文件组件中,怎么自定义注册组件的名字，我这里使用的方法是使用as

<template>
  <div class="flex-column" style="margin-left: 10px">
    <div class="flex-column" style="width: 150px">
      <ejs-button cssClass="e-outline e-primary">使用说明</ejs-button>
      <ejs-button cssClass="e-outline e-primary">导表工具</ejs-button>
      <ejs-button cssClass="e-outline e-primary">服务器工具</ejs-button>
      <ejs-button cssClass="e-outline e-primary">邮件工具</ejs-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
</script>

就像这样就可以使用 <ejs-button>而不是<ButtonComponent>

三、样式

  导入组件库的样式最好在App.vue中导入，注意的是style标签别加scoped，scoped的本质是给标签加上随机的data-v-xxx属性，但当我们使用三方组件库时，三方组件库的最终解析的dom标签不一定会有这个随机属性，因此推荐尽量不要使用scoped。

四、响应式

  响应式我推荐ref一把梭不要用reactive。
  使用ref时需要注意的是假如ref中包裹的对象是一个数组的话，使用数组的push，pop等方法是不会触发响应式，所以为了触发响应式可以使用xxx.value=value.slice()来触发响应式更新。