vue3 + typescript 实操踩的坑

前提：vue3其实也上了很久了，现在都vue3.2了，上个月中才开始在真正的项目中使用上。记录一下遇到的知识点和踩过的坑

一、优点

• vue3的写法优点是使用了Composition API，<script setup>是一种编译时语法糖，可在Vue文件内使用Composition API时极大地提升工作效率，代码简洁，提升可读性
• Typescript：对类型进行监测，智能提示等
• setup语法糖：组件不需要注册；代码简洁；更好的运行时性能等

二、vue3和Vue2的区别

• 更小：vue3整体体积变小了，移除了一些不常用的API；tree shanking：是一种通过清除多余代码方式来优化项目打包体积的技术。
• 更快：diff算法优化：vue3在diff算法中增加了静态标记，静态资源就可以不进行比较，提高性能；静态提升：静态元素只能会创建一次，在渲染时直接复用。
• 更友好：composition API：相同功能的代码编写在一块；支持TypeScript。
• Proxy：vue2 是通过Object.defineProperty进行数据劫持的，vue3是通过Proxy监听整个对象。Object.defineProperty只能遍历对象属性进行劫持；Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新对象达到响应式目的

三、实操知识点

    1. 推荐的 IDE 配置是 VSCode + Volar 扩展。

    2. 引入env.develop变量

import.meta.env.VITE_PROXY_DOMAIN

    3. ref和reactive的区别

• ref定义基础数据(null,undefined,string,number,symbol,boolean)，reactive定义复杂数据(object,array,set,map)
• ref主要处理单值的响应式，reactive主要处理对象类型的响应式
• ref内部封装一个RefImpl类，并设置get value/set value，拦截用户对值的访问，从而实现响应式；reactive内部使用Proxy代理传入对象并拦截对象的各种操作，从而实现响应式
• ref其实是一个被对象包裹的响应的数据，修改数据和获取要加上value

  const xx = ref(1)
  xx.value = 2
  console.log(xx.value) // 2

•  reactive 直接赋值数组是不能界面响应的，必须先赋值在对象上

  const xx = reactive([])
  xx = [1,2,3] // 这样子界面是没有办法获取到的
  
  // 下面写法才可以
  const xx = reactive({
      arr: []
  })
  
  xx.arr = [1,2,3]

     4. slot插槽写法不同

• vue3在父组件中使用具名插槽使用v-slot，而vue2使用slot
• vue3必须把v-slot写在template标签中，而vue2中的slot可以写在任意标签中

// 子组件 TableList.vue 
<slot name="btn" :scope="scope.row" />

// 父组件，引入
<TableList
	ref="tableRef"
	:tableTitle="tableTitle"
	:tableData="tableData"
	:pageInfo="pageInfo"
	:tableBtn="tableBtn"
	@handleClick="handleClick"
	@refresh="refresh"
>
	<template v-slot:btn="data">
		<el-button @click="showPassDialog(data.scope)">
			修改密码
		</el-button>
	</template>
</TableList>

    5. icon的使用（后面有时间再补上）

    6. 父子组件通信：请跳到这篇博文vue3 父子组件通信_周皮皮皮皮皮皮的博客-CSDN博客

结束语：总而言之，确实上了vue3后，感觉代码量是少写了一点，就是得引入各种钩子；使用typescript确实是会让代码更加规范；使用vite后，项目运行快，但是第一次进去项目首页确实慢了，第一次要等待加载。