11-生命周期

前言

本文章来源于王红元老师（coderwhy）的 Vue3 + Ts 课程
附上链接：https://ke.qq.com/course/3453141
谁能拒绝一个*100%好评还加课的老师呢

认识生命周期

• 什么是生命周期呢？
  • 每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；
  • 在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服 务器数据）；
  • 但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数；
• 生命周期函数：
  • 生命周期函数是一些钩子函数，在某个时间会被Vue源码内部进行回调；
  • 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；
  • 那么我们就可以在该生命周期中编写属于自己的逻辑代码了；

组件的生命周期

1. beforeCreate( )——准备创建
2. created( )——创建完成
3. beforeMount( )—挂载之前
4. mounted( )——挂载完成
5. beforeUpdate( )——更新之前
6. updated( )——更新完成
7. activated( )——当组件在 keep-alive 内被切换的时候它的 monnted( ) 被取代为activated
8. deactivated( )——当组件在 keep-alive 内被切换的时候它的 unmonnted( ) 被取代为deactivated
9. beforeUnmount( )—卸载之前
10. unmounted( )——卸载完成
11. errorCaptured——返回子孙组件中的错误
12. renderTracked——虚拟 DOM 重新渲染时调用。接收 debugger event 作为参数。告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
13. renderTiggered——虚拟 DOM 重新渲染被触发时调用。接收 debugger event 作为参数。告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键

生命周期的流程

组件的v-model

• 前面我们在input中可 以使用v-model来完成双向绑定：

  • 这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事；
  • v-bind:value的数据绑定和@input的事件监听；

• 如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？

  • 也是可以的，vue也支持在组件上使用v-model

• 当我们在组件上使用的时候，等价于如下的操作：

  • 我们会发现和input元素不同的只是属性的名称和事件触发的名称而已；

    

组件v-model的实现

• 那么，为了我们的MyInput组件可以正常的工作，这个组件内的 input 必须：

  • 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上；
  • 在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出；

• MyInput.vue的组件代码如下：

  

  

computed实现

• 我们依然希望在组件内部按照双向绑定的做法去完成，应该如何操作呢？我们可以使用计算属性的setter和getter 来完成。

绑定多个属性

• 我们现在通过v-model是直接绑定了一个属性，如果我们希望绑定多个属性呢？

  • 也就是我们希望在一个组件上使用多个v-model是否可以实现呢？
  • 我们知道，默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue的事件；
  • 如果我们希望绑定更多，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称；

• 注意：这里我是绑定了两个属性的

  

• v-model:title相当于做了两件事：

  • 绑定了title属性

  • 监听了 @update:title的事件；

0493535)]

• v-model:title相当于做了两件事：

  • 绑定了title属性

  • 监听了 @update:title的事件；