1、vue生命周期

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deactivated	keep-alive 专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

• 生命周期示意图

生命周期示意图

2、computed 和 watch 的区别

• computed：是计算属性，依赖其他属性的值。具有缓存，只有他依赖的值发生变化，下一次取当前属性时才会重新计算。这样避免了每次取值时都重新计算。内部不允许改变其他属性的值。切必须返回当前属性值。
• watch：观察作用。用于监听某个值变化后的回调操作。而且watch内部可以允许异步操作。内部可以同时改变多个属性的值或者执行多个方法。

3、vue中 父组件和子组件生命周期函数执行的顺序

按照不同的过程可以分为4类：

1. 加载渲染的过程
   父组件beforeCreate -> 父组件create -> 父组件beforeMounted -> 子组件beforeCreate -> 子组件create -> 子组件beforeMount -> 子组件 mounted -> 父组件 mounted
2. 子组件更新
   父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件updated
3. 父组件更新
   父组件 beforeUpdate -> 父组件updated
4. 销毁
   父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

4、v-model 原理

v-model指令实际上就是语法糖，在表单元素上创建双向数据绑定。根据不同的表单元素，绑定不同的属性值和事件实现双向数据绑定。

• input[type='text']、textarea 绑定属性value 和 input 事件

<input v-model="a">
// 相当于
<input :value="a" @input="a = $event.target.value">

• input[type='checkbox']、input[type='radio'] 绑定属性checked 和 change 事件

<input type="checkbox" v-model="a">
// 相当于
<input :checked="a" @change="a = $event.target.checked">

• select 绑定属性value 和 change 事件

<select v-model="a"></select>
// 相当于
<select :value="a" @change="a = $event.target.value"></select>

• 在自定义组件上使用v-model，相当于给自定义组件传入一个属性 value， 并且绑定一个input方法

// 父组件：
<Parent v-model="a"></Parent>

// 子组件：
<template>
  <div>{{value}}</div>
</template>
<script>
export default {
  props:{
    value: String
  },
  methods: {
    test(){
       this.$emit('input', 'aaaaaa')
    },
  },
}
</script>

5、vue 组件间通信的方法

1. props / $emit() 用于父子组件间的通信
2. ref和 $parent / $children 用于父子组件间的通信

• ref 绑定在DOM元素上是返回的是DOM元素，绑定在Vue组件上时返回的是Vue组件的实例对象

3. EventBus $emit() / $on 用于父子组件、隔代组件和兄弟组件间的通信

// bus.js
import Vue from 'vue'
export default new Vue()

// 在组件中created()方法中监听事件
import Bus from 'path/to/bus'
export default {
  created(){
    Bus.$on('clickme', target => {
      console.log('clickme', target)
    })
  }
}

// 在其他组件中触发事件
import Bus from 'path/to/bus'
export default {
  methods:{
    test(){
      Bus.$emit('clickme', '啦啦啦啦啦')
    }
  }
}

4. $attrs / $listeners用于隔代组件间通信

通过$attrs向子孙组件传递属性
通过$listeners子孙组件向爷爷组件$emit()通信
看到一篇文章讲解很详细
文章的地址

5. provide / inject 用于隔代组件间通信

// 爷爷组件
<script>
export default {
  provide:{
    a:1
  }
}
</script>

// 孙子组件
<template>
  <div>{{ a }}</div>
</template>
<script>
export default {
  inject:{
    a:{
      defalut: 0
    }
  }
}
</script>

6. vuex 用于父子组件、隔代组件、兄弟组件间通信
   vuex官网