本文已参与「新人创作礼」活动，一起开启掘金创作之路。

生命周期

生命周期&生命周期函数

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

2. 生命周期函数，是指vue框架提供的内置函数，会伴随着组件的生命周期，按照顺序依次执行。

3. 组件创建阶段

   graph LR
   A(new Vue) --> B[beforeCreate] --> C[created] --> D[beforeMount]-->E[mounted]
   

4. 组件运行阶段

   graph LR
   A[beforeUpdate] --> B[updated]
   

5. 组件销毁阶段

   graph LR
   A[beforeDestroy]-->B[destroyed]
   

组件之间的数据共享

父向子传值

1. props

子向父传值

1. 使用自定义事件

   //子组件
   data(){
       return{
           count :0
       }
   },
   methods:{
       methodName(){
           this.filed += 1
           
           this.$emit('numchange', this.filed)
       }
   }
   
   // 父组件
   <Son @numchange="getNewCount"></Son>
   
   data(){
       return{
           countFromSon: 0
       }
   },
   methods:{
       getNewCount(val){
           this.countFromSon = val
       }
   }
   

兄弟之间的数据共享

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

ref 引用

ref

ref用来辅助开发者在不引用JQuery的情况下，获取DOM元素或组件的引用。

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。

this.$nextTick(cb)方法，延迟方法的执行时间，到DOM更新完成后执行

数组方法

some方法

const arr = ['1','2','3']

arr.some((item, index)=>{
    if(item === '1'){
        // 在找到对应的项后，通过return true结束循环
        
        return true
    }
})

every循环

const arr = [
    			{id:1,name:'tom',state: true},
    			{id:2,name:'alex',state:true},
    			{id:3,name:'jonh',state:true}
            ]
// 判断是否每个人都被选中
const result = arr.every(item=>item.state)
console.log(result)

reduce方法

const arr = [
    			{id:1,name:'tom',state: true, count : 2, money: 10},
    			{id:2,name:'alex',state:true, count : 5, money: 20},
    			{id:3,name:'jonh',state:true, count : 7, money: 30}
            ]
let amt = 0
const result = arr.filter(item=>item.state).reduce((amt, item)=>{ return amt += item.count * item.count }, 0)