五分钟上手Vue 2：理解生命周期、数据共享和ref等基础知识快速开展前端项目

狗蛋的博客之旅

已于 2023-05-21 09:53:12 修改

阅读量149

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript

于 2022-09-27 18:06:05 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/127074708

版权

Vue2 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

来源

https://www.bilibili.com/video/BV1zq4y1p7ga/?spm_id_from=333.337.search-card.all.click

组件的生命周期

1. 生命周期& 生命周期函数

生命周期 （ Life Cycle ）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。

生命周期函数 ：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

2. 组件生命周期函数的分类

3. 如何监听组件的不同时刻

vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：

① 当组件在内存中被创建完毕之后，会自动调用 created 函数

② 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数

③ 当组件被销毁完毕之后，会自动调用 unmounted 函数

4. 如何监听组件的更新

当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和 Model 数据源保持一致。

当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数。

5. 组件中主要的生命周期函数

生命周期函数	执行时机	所属阶段	执行次数	应用场景
created	组件在内存中创建完毕后	创建阶段	唯一1次	发 ajax 请求初始数据
mounted	组件初次在页面中渲染完毕后	创建阶段	唯一1次	操作 DOM 元素
updated	组件在页面中被重新渲染完毕后	运行阶段	0 或多次	-----
unmounted	组件被销毁后（页面和内存）	销毁阶段	唯一1次	------

注意：在实际开发中，created 是最常用的生命周期函数！

6. 组件中全部的生命周期函数

生命周期函数	执行时机	所属阶段	执行次数	应用场景
beforeCreate	在内存中开始创建组件之前	创建阶段	唯一1次	-
created	组件在内存中创建完毕后	创建阶段	唯一1次	发 ajax 请求初始数据
beforeMount	在把组件初次渲染到页面之前	创建阶段	唯一1次	-
mounted	组件初次在页面中渲染完毕后	创建阶段	唯一1次	操作 DOM
beforeUpdate	在组件被重新渲染之前	运行阶段	0 或多次	-
updated	组件在页面中被重新渲染完毕后	运行阶段	0 或多次	-
beforeUnmount	在组件被销毁之前	销毁阶段	唯一1次	-
unmounted	组件被销毁后（页面和内存）	销毁阶段	唯一1次	-

代码示例：

<script>
export default {
  data() {
    return {
    }
  },
 
  // 创建阶段的第1个生命周期函数
  beforeCreate() {
    console.log(beforeCreate)
  },
  created() {
    // created 生命周期函数，非常常用。
    // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
    // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
    this.initBookList()
  },
  beforeMount() {
    // console.log('beforeMount')
    // const dom = document.querySelector('#myh3')
    // console.log(dom)
  },
  // 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行
  mounted() {
    console.log(this.$el)
  },
  beforeUpdate() {
   console.log('beforeUpdate')
  },
  // 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

7. 完整的生命周期图示

可以参考 vue 官方文档给出的“ 生命周期图示 ”，进一步理解组件生命周期执行的过程：

https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示

组件之间的数据共享

1. 组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：

① 父子关系

② 兄弟关系

2. 父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子共享数据

② 子 -> 父共享数据

2.1 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

2.2 子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下：

2.3 兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus 。

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit (' 事件名称 ', 要发送的数据 ) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on (' 事件名称 ', 事件处理函数 ) 方法注册一个自定义事件

3. 后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。

3.1 父节点通过 provide 共享数据

父节点的组件可以通过 provide 方法，对其子孙组件共享数据：

  data() {
    return {
      color: 'red',
    }
  },
  provide() {
    // 返回要共享的数据对象
    return {
      color:this.color,
      count: 1,
    }
  },

3.2 子孙节点通过 inject 接收数据

子孙节点可以使用 inject 数组，接收父级节点向下共享的数据。示例代码如下：

<template>
  <div>
    <h5>Level Three 三级组件 --- {{ color}} --- {{ count }}</h5>
  </div>
</template>

<script>
export default {
  name: 'LevelThree',
  inject: ['color', 'count'],
}
</script>

<style lang="less" scoped></style>

3.3 父节点对外共享响应式的数据

父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据。示例代码如下：

// 在vue实例对象中导出 computed 函数
import { computed } from 'vue'

export default {
  name: 'MyApp',
  data() {
    return {
      color: 'red',
    }
  },
  provide() {
    // 返回要共享的数据对象
    return {
      color: computed(() => this.color),
      count: 1,
    }
  }
}

3.4 子孙节点使用响应式的数据

如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用。示例代码如下：

<template>
  <div>
    <h5>Level Three 三级组件 --- {{ color.value }} --- {{ count }}</h5>
  </div>
</template>

<script>
export default {
  name: 'LevelThree',
  inject: ['color', 'count'],
}
</script>

<style lang="less" scoped></style>