Vue3.x开发积累

概述 这篇文章会带着大家去阅读TS内置工具类型源码，也会对基本对使用做介绍。这些工具类型的定义位于TypeScript语言安装目录下的“lib/lib.es5.d.ts”文件中。结合源码学习，一能够掌

VNode hooks 在每个组件或HTML标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有： onVnodeBeforeMount onVnodeMounted onVno

这个在vue2 就已经有一个东西是Mixins mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。 弊端就是 会涉及到覆盖的问题组件的

我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格 vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接

两种方案 借助父组件传参 例如父组件为App 子组件为A 和 B他两个是同级的 A 组件派发事件通过App.vue 接受A组件派发的事件然后在Props 传给B组件 也是可以实现的 缺点就是比较麻烦

Suspense（异步组件&代码分包&suspense） 在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积 这时候就可以使用异步组件 顶层 await 在setup语法糖里面

父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值， 如以下代码 给Menu组件 传递了一个title 字符串类型是不需要v-bind 传递非字符串类型需要加v-b

## directive-自定义指令（属于破坏性更新） Vue中有v-if,v-for,v-bind，v-show,v-model 等等一系列方便快捷的指令 今天一起来了解一下vue里提供的自定义指

小技巧Vue3自动引入插件 unplugin-auto-import/vite vite配置 配置完成之后使用ref reactive watch 等 无须import 导入 可以直接使用 v-mod

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb（newVal,oldVal） watch第三个参数一个options配置

Provide / Inject 通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍

computed用法 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。 函数形式 对象形式

reactive 用来绑定复杂的数据类型 例如 对象 数组 他是不可以绑定普通的数据类型这样是不允许 会报错 绑定普通的数据类型 可以使用ref 如果用ref去绑定对象 或者 数组 等复杂的数据类型

toRef 如果原始对象是非响应式的就不会更新视图 数据是会变的 如果原始对象是响应式的是会更新视图并且改变数据的 toRefs 可以帮我们批量创建ref对象主要是方便我们解构使用 toRaw 将响应

脑图 为 props 标注类型 使用 <script setup> 当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型： 这被称为 运行时声明 ，因为