Vue3组合式API的生命周期、defineProps、defineEmits、依赖注入

xinxin_k
315 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情juejin.cn/post/714765…

onBeforeMounted（）

组件被挂在之前调用，有了响应式状态，watch，computed，只是没有真实的DOM。

onMounted（）

组件挂载之后调用。这里可以访问真实DOM

onBeforeUpdate（）

组件更新之前调用

onUpdated（）

注意：在这里不能更改状态，否则陷入死循环。

onBeforeUnmounte（）

组件被写在之前调用

onUnmounted（）

组件被卸载之后调用

onErrorCaptured()

注册一个钩子，在捕获了后代组件传递的错误时调用。

错误可以从以下几个来源中捕获：

  • 组件渲染
  • 事件处理器
  • 生命周期钩子
  • setup() 函数
  • 侦听器
  • 自定义指令钩子
  • 过渡钩子

这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。

下图是onErrorCaptured()钩子函数 1.png

下图是console出来的控制台TypeError对象 2.png

下图是console出来的控制台Proxy对象 3.png

下图是console出来的控制台错误字符串

4.png

  • 我们可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。注意不要让错误状态再次渲染导致本次错误的内容，否则组件会陷入无限循环。
  • 这个钩子可以通过返回 false 来阻止错误继续向上传递。因为错误报告是会一层一层向上传递到祖先组件，加了false的话，就不会冒泡传递了。
  • errorCaptured()可以检测某一个组件的内部错误。监听到以后，向服务器发送错误报告。
  • 具体使用方法：可以在组件内定义状态，然后把三个参数传递到钩子函数中进去。 app.config.errorHandler (前提是这个函数已经定义)，在main.js里写入该函数，然后整个应用程序的错误都会被它捕获，如果发生错误，会把消息传递给服务器（在该钩子里发请求）

组合式API中如何获取真实DOM？

给元素添加ref属性，值是通过ref（）方法创建出来的对象

import {ref} from "vue"
const inp = ref(null)
<input type="text" ref="inp"/>

props传值

传：照常传值

收：如果是<script setup>可以使用defineProps(['传过来的属性名1'，'2'])

import {defineProps} from "vue"
<script setup>
    const props = defineProps(['传过来的属性名1','传过来的属性名2'])
    defineProps({
        newBook:String
    })
</scirpt>
<tameplate>
<div>{{传过来的属性名1}}</div>
</tameplate>

如果是使用了setup方法，不能使用defineProps（）方法，具体写法如下：

<script>
    props:['传过来的属性名1'，'2'];
   setup(props){}；//该方法接收props作为第一个参数
<script>

defineEmits（）声明触发的事件

  1. 在模板中能访问$emit方法，在viewModel中不能，因为viewModel没有this，要调用const emit = defineEmits（）方法的返回值emit('自定义事件名')函数。
  2. 在显示的使用了setup（）方法，那么还是用选项式的emits属性声明触发事件。 只不过这时候setup（props，context）{}接收第一个参数props，第二个参数context（是一个上下文对象），通过context.emit()方法触发自定义事件。

provide和inject两个方法的依赖注入

向后代传值： 5.png 接收值 6.png

  • 如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。
  • 并且要注意，如果想要修改注入的值，尽量都放在祖先组件中修改，这样的话保证响应式状态和修改状态都在一个组件中，易于维护。如果不想让后代组件修改值，在传的时候，用上readonly方法把要传的数据包裹一下。provide(暴露的键名,readonly(暴露的响应式数据))
avatar
文章
阅读
粉丝