# 生命周期与数据共享

# 生命周期 & 生命周期函数

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

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

1. 组件创建阶段
   • New Vue()
     • beforeCreate
     • created
     • beforeMount
     • mounted
2. 组件运行阶段
   • beforeUpdate
   • updated
3. 组件销毁阶段
   • beforeDestroy
   • destroyed

• beforeCreated () : 创建阶段的第一个生命周期函数，此时 props, data, methods 都未完成初始化
• created () : 非常常用，经常在它里面，调用 methods 中的方法，请求服务器的数据，并且经常把请求到的数据，转存到 data 中，供 template 模板渲染使用
• beforeMount () : 此时已经编译好 HTML 结构，但是尚未进行渲染
• mounted () : 此时编译好的 HTML 结构已经渲染进 DOM 结构了
• beforeUpdate () : 当接收到新数据，渲染页面结构之前触发此函数
• updated () : 数据更新完毕后触发此函数，当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 声明周期函数中
• beforeDestroy () : 例如 v-if 条件成立，销毁节点前触发此函数
• destroyed () : 销毁节点后立即触发此函数

# 组件之间的数据共享

组件之间的关系

1. 父子关系
2. 兄弟关系

# 父组件向子组件传递数据

父组件向子组件共享数据需要使用自定义属性.

父组件 :

1
2
3
4
5
6
7
8

<Son :msg="message" :user="info"></Son>

data() {
	return {
		message: 'hello vue.js',
		info: {name: 'zs', age: 20}
	}
}

子组件 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <div>
    <h5>Son 组件</h5>
    <p>父组件传递过来的msg值为 : {{msg}}</p>
    <p>父组件传递过来的user值为 : {{user}}</p>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: ['msg', 'user'],
}
</script>

# 子组件向父组件传递数据

子组件向父组件共享数据使用自定义事件

父组件

1
2
3
4
5
6
7

<Son :msg="message" :user="info" @numChange="getNewCount"></Son>

methods: {
    getNewCount(val) {
        this.countFromSon = val
    }
}

子组件

1
2
3
4
5
6
7
8
9

<p>{{count}}</p>
<button @click="add">+1</button>

methods: {
    add() {
        this.count += 1
        this.$emit('numChange', this.count)
    }
}

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

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

EventBus 的使用步骤

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

数据发送方 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import bus from '@/components/EventBus'

export default {
    data() {
        return {
            msg: 'hello vue.js'
        }
    },
    methods: {
        sendMsg() {
            bus.$emit('share', this.msg)
        }
    }
}

EventBus.js

1
2
3

import Vue from 'vue'

export default new Vue()

数据接收方

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import bus from '@/components/EventBus'

export defatul {
    data() {
        return {
            msgFromLeft: ''
        }
    },
    created() {
        bus.$on('share', val=> {
            this.msgFromLeft = val
        })
    }
}