vue入门之04-生命周期 & 数据共享

生命周期 & 数据共享

1. 组件的生命周期

1.1 生命周期 & 生命周期函数

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

1.2 组件生命周期函数的分类

1.3 生命周期

<template>
  <div class="test-container">
    <h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3>
    <p id="pppp">message 的值是：{{ message }}</p>
    <button @click="message += '~'">修改 message 的值</button>
  </div>
</template>

<script>
export default {
  props: ['info'],
  data() {
    return {
      message: 'hello vue.js',
      // 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！
      books: []
    }
  },
  watch: {
  },
  methods: {
  },
  // 一  创建阶段的第1个生命周期函数  一般无法操作
  beforeCreate() {
  },
    //二、 可以对data methods prop 进行操作
  created() {
    // created 生命周期函数，非常常用。
    // 经常在它里面，调用 methods 中的方法，请求服务器的数据。
    // 并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
    this.initBookList()
  },
    // 三、 无实际意义
  beforeMount() {
  },
  // 四 、 如果要操作当前组件的 DOM，最早，只能在 mounted 阶段执行  
  mounted() {

  },
    // 五、
  beforeUpdate() {

  },
  // 六、当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
  updated() {

  },
    // 七、
  beforeDestroy() {
    
  },
    //八、
  destroyed() {
  }
}
</script>

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

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

2 组件之间的数据共享

2.1 组件之间的关系

父子关系

兄弟关系

2.2 使用组件的三个步骤

通过 components 注册的是私有子组件

2.3 父子组件之间的数据共享

父子组件之间的数据共享又分为：
① 父 -> 子共享数据
② 子 -> 父共享数据

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

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

自定义属性 : 即父组件可以通过v-bind传递数值 在子组件中用props接收数值

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

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

自定义事件 : 子组件用$emit触发自定义事件 父组件用自定义事件来接收

numchange 是父组件中的触发事件

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

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

EventBus 的使用步骤
① 创建 eventBus.js 模块，并向外共享一个Vue 的实例对象
② 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件
③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

注意 在新版本的3.0中可以使用vuex进行兄弟之间传值 vuex更好用 我的博客中也有关于vuex的介绍与使用

2.4 兄弟组件之间的数据共享(vue3)

（1）安装 mitt 依赖包
在项目中运行如下的命令，安装 mitt 依赖包：

npm install mitt@2.1.0

(2) 创建公共的 EventBus 模块
在项目中创建公共的 eventBus 模块如下：

(3) 在数据接收方自定义事件
在数据接收方，调用bus.on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件。示例代码如下：

(4) 在数据接发送方触发事件
在数据发送方，调用 bus.emit(‘事件名称’, 要发送的数据) 方法触发自定义事件。示例代码如下：

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

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

2.5.1 父节点通过 provide 共享数据

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

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

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

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

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

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

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

3 ref引用

3.1 什么是 ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

3.2 使用 ref 引用 DOM 元素

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

3.3 使用 ref 引用组件实例

如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

3.4 控制文本框和按钮的按需切换

通过布尔值inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：

3.5 让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的
.focus() 方法即可。示例代码如下：

但是这么调用你会发现无法成功 原因是虽然设置了inputVisible是true ，但是还未渲染成功页面，文本框还未出现 所以会出错

使用3.6的方法可以解决

3.6 this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

4 数组的几个方法

4.1 some

用这个可以停止 不会白白浪费性能

const arr = ['小红', '你大红', '苏大强', '宝']

// forEach 循环一旦开始，无法在中间被停止
/* arr.forEach((item, index) => {
      console.log('object')
      if (item === '苏大强') {
        console.log(index)
      }
    }) */

// 用这个可以停止 不会白白浪费性能
arr.some((item, index) => {
      console.log('ok')
      if (item === '苏大强') {
        console.log(index)
        // 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
        return true
      }
    }) 

4.2 every

判断数组中全部元素的状态

  const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: false },
      { id: 3, name: '草莓', state: true },
    ]

    // 需求：判断数组中，水果是否被全选了！
    const result = arr.every(item => item.state)
    console.log(result)

4.3 reduce

累加数组

const arr = [
    { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
    { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
    { id: 3, name: '草莓', state: true, price: 20, count: 3 },
]

// 需求：把购物车数组中，已勾选的水果，总价累加起来！
/* let amt = 0 // 总价
        arr.filter(item => item.state).forEach(item => {
          amt += item.price * item.count
        })

        console.log(amt) */

// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

console.log(result)