Vue基础入门（三）------ 生命周期 & 数据共享 & ref 引用

1. 组件的生命周期

生命周期 & 生命周期函数

组件生命周期函数的分类

生命周期图示
可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：
https://cn.vuejs.org/v2/guide/instance.html# 生命周期图示

• created 生命周期函数，非常常用，经常在它里面，调用 methods 中的方法，请求服务器的数据。并且，把请求到的数据，转存到
  data 中，供 template 模板渲染的时候使用！
• 如果要操作当前组件的 DOM，最早只能在 mounted 阶段执行
• 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中

2. 组件之间的数据共享

组件之间的关系

父子组件之间的数据共享

• 父 -> 子共享数据
• 子 -> 父共享数据

父组件向子组件共享数据

子组件向父组件共享数据

兄弟组件之间的数据共享

3. ref 引用

什么是 ref 引用

使用 ref 引用 DOM 元素

使用 ref 引用组件实例

以后在工作中，如果需要在父组件中直接调用子组件里面的方法，最简单的方式就是ref，比父子组件共享数据方式简单得多

this.$nextTick(cb) 方法

当某些方法需要延迟，延迟到dom重新渲染完毕才执行，这个时候需要用到 this.$nextTick(cb) 方法

4. 购物车案例

JS中的数组 some 方法

// 语法
array.some( function( currentValue, index, arr), thisValue)

some() 方法用于检测数组中的元素是否满足指定条件（函数提供），通俗点讲就是查找数组中是否有满足条件的元素；返回布尔值：如果数组中有元素满足条件返回 true，否则返回 false。
some() 不会对空数组进行检测；some() 不会改变原始数组。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true ；终止循环，剩余的元素不会再查找
• 如果没有满足条件的元素，则返回false

JS中数组 every() 方法

//语法
array.every( function(currentValue, index, arr), thisValue)

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）；返回布尔值，如果所有元素都通过检测返回 true，否则返回 false。
every() 不会对空数组进行检测； every() 不会改变原始数组。

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
• 如果所有元素都满足条件，则返回 true

JS中数组 reduce() 方法

定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose；
reduce() 对于空数组是不会执行回调函数的；

//语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)