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类：
- 加载渲染的过程
父组件beforeCreate -> 父组件create -> 父组件beforeMounted -> 子组件beforeCreate -> 子组件create -> 子组件beforeMount -> 子组件 mounted -> 父组件 mounted - 子组件更新
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件updated - 父组件更新
父组件 beforeUpdate -> 父组件updated - 销毁
父组件 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 组件间通信的方法
-
props / $emit()用于父子组件间的通信 -
ref和$parent / $children用于父子组件间的通信
- ref 绑定在DOM元素上是返回的是DOM元素，绑定在Vue组件上时返回的是Vue组件的实例对象
- 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', '啦啦啦啦啦')
}
}
}
-
$attrs / $listeners用于隔代组件间通信
通过$attrs向子孙组件传递属性
通过$listeners子孙组件向爷爷组件$emit()通信
看到一篇文章讲解很详细
文章的地址
-
provide / inject用于隔代组件间通信
// 爷爷组件
<script>
export default {
provide:{
a:1
}
}
</script>
// 孙子组件
<template>
<div>{{ a }}</div>
</template>
<script>
export default {
inject:{
a:{
defalut: 0
}
}
}
</script>
- vuex 用于父子组件、隔代组件、兄弟组件间通信
vuex官网
