3.1 组件的生命周期
1、概念
（1）生命周期：是指一个组件从创建、运行、销毁的整个阶段，强调的是一个时间段
（2）生命周期函数：是由vue框架提供的内置函数，会伴随组件的生命周期，自动按次序执行
2、生命周期函数示意图：Vue 实例 — Vue.js
3、生命周期函数
（1）组件创建阶段
-
beforeCreate()
组件的props/data/methods尚未被创建，都处于不可用状态
-
created()
组件的props/data/methods已创建好，都处于可用状态，但是组件的模板结构尚未生成
-
beforeMount()
将要把内存中编译好的HTML结构渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构
-
mounted()
已经把内存中HTML结构，成功的渲染到了浏览器中，此时浏览器中已然包含了当前组件的DOM结构
（2）组件运行阶段
-
beforeUpdate()
将要根据变化过后最新的数据，重新渲染组件的模板结构
-
updated()
已经根据最新的数据，完成了组件DOM结构的重新渲染
（3）组件销毁阶段
-
beforeDestroy()
将要销毁此组件，此时尚未销毁，组件还处于正常工作状态
-
destroyed()
组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除
3.2 组件之间的数据共享
1、组件之间的关系
在项目开发中常见的是：父子关系、兄弟关系
2、父子关系
（1）父向子传值：使用自定义属性（props）
注意：自定义属性定义在子组件中，不要修改props的值
（2）子向父传值：使用自定义事件
步骤：
-
父组件接收emit回来的值
-
父组件在methods中定义这个函数将其接收到父组件中
-
子组件调用$emit()。修改数据时，通过$emit()触发自定义事件
<!--子组件-->
export default {
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count += 1;
this.$emit("changeNumber", this.count);
},
},
};
<!--父组件-->
<Son @changeNumber="getNumber"></Son>
export default {
data() {
return {
countfromSon: 0,
};
},
methods: {
getNumber(val) {
this.countfromSon = val;
},
},
components: {
Son,
},
};
3、兄弟关系
（1）在vue2.x。兄弟组件之间的数据共享方案是EventBus
（2）EventBus使用步骤：
-
创建EventBus.js模块，并向外共享一个Vue的实例对象
-
在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件，在methods中
-
在数据接收方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件,一般在created()中
（3）例子
<!-- 数据发送方 -->
<script>
// 导入EventBus.js
import bus from "@/components/EventBus.js";
export default {
data() {
return {
str: "会挽雕弓如满月，西北望，射天狼。",
};
},
methods: {
send() {
// 利用EventBus发送数据
bus.$emit("share", this.str);
},
},
};
</script>
<!-- 数据接收方 -->
<script>
// 导入EventBus.js
import bus from "@/components/EventBus.js";
export default {
data() {
return {
msgFromBro: "",
};
},
created() {
bus.$on("share", (val) => {
this.msgFromBro = val;
});
},
};
</script>
<!-- EventBus.js --> import Vue from 'vue' export default new Vue()
3.3 ref引用
1、概念
（1）ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用
（2）每个vue的组件实例上都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象
2、使用ref引用DOM元素
-
使用$refs：this.$refs.ref名称
-
ref名称不能重复
<h1 ref="myh1">App 根组件----{{ countfromSon }}</h1>
<button @click="showThis">打印this</button>
methods: {
showThis() {
this.$refs.myh11.style.color = "red";
// console.log(this.$refs.myh11);
},
},
3、使用ref引用组件实例
<!--使用ref属性为对应的组件添加引用名称-->
<Ref ref="comRef"></Ref>
<button @click="onReset">重置</button>
<script>
import Ref from "@/components/Ref.vue";
export default {
methods: {
onReset() {
//调用子组件函数
// this.$refs.comRef.reset();
//调用子组件data值
this.$refs.comRef.count = 0;
},
},
components: {
Ref,
},
};
</script>
4、this.$nextTick(callback)
组件的this.$nextTick(callback)方法，会把callback回调推迟到下一个DOM更新周期之后执行
3.4 引申-数组方法
1、some循环
（1）forEach循环只要开始，在中间无法终止
（2）从数组中找元素用some，在找到对应项之后，用return true终止循环
（3）语法
arr.some((item, index) => {
//循环语句，return true是为了终止循环
return true
})
2、every循环
（1）判断数组中每一项是否被全选，全是true结果是true，有一个是false，结果就是false
（2）语法
arr.every(item => item.state)
3、reduce方法
-
reduce就是累加器
-
使用方法：reduce((累加的结果,当前循环项)=>{},初始值)，reduce里面是箭头函数和初始值，每次循环之后第二个值都会相加
//当state为true时算总价
const arr = [
{ id: 1, name: '西瓜', state: false, price: 10, count: 1 },
{ id: 2, name: '苹果', state: true, price: 20, count: 2 },
{ id: 3, name: '榴莲', state: true, price: 50, count: 3 }
]
//方法1
let amt = 0
arr.filter(item => item.state).forEach(item => {
amt += item.price * item.count
})
console.log(amt);
//方法2
const res = arr.filter(item => item.state).reduce((amt, item) => {
return amt += item.price * item.count
}, 0)
console.log(res);
