1.什么是Vue生命周期?
vue生命周期是指vue是对象从创建到销毁的过程。
2.Vue生命周期的作用是什么?
在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段:beforecreate:
实例已经初始化,但不能获取DOM节点。(没有data,没有el)created:
实例已经创建,仍然不能获取DOM节点。(有data,没有el)
载入阶段:beforemount:
模板编译完成,但还没挂载到界面上。(有data,有el)mounted:
编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段:beforeupdate:
数据发生变化立即调用,此时data中数据是最新的,但页面上数据仍然是旧的(检测到数据更新时,但DOM更新前执行)。updated:
更新结束后执行,此时data中的值和页面上的值都是最新的。
销毁阶段:beforedestroy:
当要销毁vue实例时,在销毁之前执行。destroy:
在销毁vue实例时执行。
3.第一次页面加载会触发哪几个钩子函数?
beforeCreate
,created
,beforeMount
,mounted
。
4.简述每个生命周期具体适合哪些场景?
beforecreate:
可以加Loading事件。create:
初始化完成时的事件写在这里,异步请求也适宜在这里调用(请求不宜过多,避免白屏时间太长)。
可以在这里结束loading事件,还做一些初始化,或实现函数的自执行。
此时未挂载DOM,若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。mounted:
此时完成挂载DOM和渲染,需要操作DOM的方法可以放在这里,也可在这发起后端请求,拿回数据,配合路由钩子做一些事情。beforeupdate:
可在更新前访问现有的DOM,如手动移出添加的事件监听器。updated:
组件DOM已完成更新,可执行依赖的DOM操作。
注意:不要在此函数中操作数据(修改属性),会陷入死循环。activated:
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发。
deactivated:<keep-alive></keep-alive>组件被移除时使用。beforedestroy:
销毁前,可以做一些删除提示,如:您确定删除xx吗?destroy:
销毁后,这时组件已经没有了,无法操作里面的任何东西了。
5.created和mounted的区别?
created:
实例已经创建,但不能获取DOM节点。mounted:
模板已经挂载到页面上,可以操作DOM元素。
6.vue组件间通信六种方式
组件之间的传值通信
组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯;
(1)props/$emit
- 父传子:
props
- 子传父:父组件向子组件传递事件方法,子组件通过
$emit
触发事件,回调给父组件(2)
$eimt/$on
- 这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。
具体实现方式:var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {}); // 假设兄弟组件有三个,分别是A、B、C组件,C组件如何获取A或者B组件的数据 // 组件A、B通过Event.$emit(事件名,数据)将数据传递,组件C通过 Event.$on(事件名,data => {})接受组件A、B传递的数据
(3)
Vuex
- vuex 就是一个仓库,仓库里放了很多对象。在state中存放数据源,当组件要更改state中的数据时,必须通过mutation进行,mutation储存的是改变state中数据的操作方法,之后通过actions储存的操作去触发mutation中的方法,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。
(4)
Vuex + localstorage
- vuex 是 vue 的状态管理器,存储的数据是响应式的。但是并不会保存起来,刷新之后就回到了初始状态,具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面,刷新之后,如果localStorage里有保存的数据,取出来再替换store里的state。
- 这里需要注意的是:由于vuex里,我们保存的状态,都是数组,而localStorage只支持字符串,所以需要用JSON转换。
(5)
$attrs/$listeners
- $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="
$attrs
" 传入内部组件——在创建高级别的组件时非常有用。- $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="
$listeners
" 传入内部组件——在创建更高层次的组件时非常有用。(6)
provide/inject
- provide/inject:vue2.2.0 新增API,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
- 总而言之:祖先组件中通过provider来提供变量,然后在子孙组件中通过inject来注入变量。
provide / inject API
主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系