Vue3 + TypeScript 开发实践总结

在 setup 中 访问 定义的变量值,不能直接通过变量名来获取,必须通过 变量名…

  1. setup 中 访问 定义的变量值,不能直接通过变量名来获取,必须通过 变量名.value 来获取到该对象 、 值

这样的好处

  • 状态好管理,可以划分好几个 setup 状态管理,最后在一个 文件导入所有,并且使用。

4.3 生命周期

Composition Api生命周期钩子 和 Vue 2 选项式 生命周期钩子名称一样,只是在使用 组合式API时,前缀为 on, onMounted`

sd

下面代码中有两个 mounted 生命钩子,你猜哪个会先执行?

setup 会先执行

4.4 watch

setup 中使用 watch响应式更改

  • 引入 watch, import { watch } from 'vue'

  • 直接使用watch,watch 接受 3 个参数

  1. 要监听更新的 响应式引用或者 getter 函数

  2. 一个回调用来做更新后的操作

  3. 可选配置项

4.5 computed

它也是 从 vue 导入,computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输出的一个只读的响应式引用。为了访问新创建的计算变量的 value,我们需要像使用 ref 一样使用 .value property。

当num值变化时,nums 的值会 3

五,setup

5.1 接受两个参数

props: 父组件传递过来的属性, setup` 函数中 props 是响应式的,它会随着数据更新而更新,并且不能使用 ES6 解构,因为它会不能使 props 为响应式。

context : 它是一个普通的 对象,它暴露3个组件的· property

  1. Attribute

  2. 插槽

  3. 触发事件

context 不是 响应式的,所以可以使用ES6 解构来简便写法。

5.2 组件加载 setup 时注意

在组件执行 setup 时, 组件实例没有被创建,因此就无法访问以下属性

  • data

  • computed

  • methods

六,生命周期

setup 中使用 生命周期时,前缀必须加 on.

选项式 API Hook inside setup
beforeCreate
created
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered

七, 跨组件之间传值

Vue 2 中,我们可以使用 Provide/Inject 跨组件传值,在 Vue 3 中也可以。

setup 中 使用,必须从 vue 中导入使用。

使用 Provide 时,一般设置为 响应式更新的,这样的话,父组件变更,子组件,子孙组件也跟着更新。

怎么设置为响应式更新呢?

  1. 使用 ref / reactive 创建响应式变量

  2. 使用 provide('name', '要传递的响应式变量')

  3. 最后添加一个更新 响应式变量的事件,这样响应式变量更新,provide 中的变量也跟着更新。

父组件

子组件

八, 在Vue 中 使用 TypeScirpt 技巧

8.1 接口约束约束属性

采用 TypeScirpt 的特性, 类型断言 + 接口 完美的对 属性进行了 约束

interface

组件中使用

8.2 组件使用 来 defineComponent 定义

这样 TypeScript 正确推断 Vue 组件选项中的类型

8.3 类型声明 reactive

END

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/4824.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部