vue生命周期钩子函数(目前有11个,8个常用的)
(1)beforeCreate(创建前)
详 细:在实例初始化之后,数据观测和event/watcher事件配置之前被调用
组件状态:实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据
最佳实践:常用于初始化非响应式变量
(2)created(创建后)
在实例创建完成后被立即调用;
实例已完成:数据观测,属性和方法的运算,watch/event事件回调;
挂载还没开始,$el属性(视图)目前不可见。
($el --> Vue实例使用的跟DOM元素)
组件状态:实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到el属性,el属性,ref属性内容为空数组
最佳实践:常用于简单的ajax请求,页面的初始化
(3)beforeMount(载入前)
在挂载开始之前被调用:相关的render函数首次被调用
(在服务端渲染期间不被调用)
组件状态:在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数
(4)mounted(载入后)
el被新创建的vm.$el替换,并挂载到实例上去之后调用
所有的子组件不一定都会被挂载,想要等整个视图都渲染完毕,可以用vm.$nextTick替换掉mounted:
mounted:function(){
this.$nextTick(function(){
})
}
(在服务端渲染期间不被调用)
组件状态:实例挂载在DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问(视图可见,子组件不一定全部被挂载)
最佳实践:常用于获取VNode信息和操作,ajax请求
(5)beforeUpdate(更新前)
(在服务端渲染期间不被调用,因为只有初次渲染会在服务端进行)
组件状态:响应式数据更新时调用,发生在虚拟DOM打补丁之前
最佳实践:适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器
(6)updated(更新后)
(在服务端渲染期间不被调用)
详细:updated不承诺所有的子组件都一起被重绘,等重绘完毕,可以用vm.$nextTick替换updated(同mounted)
组件状态:虚拟DOM重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作
最佳实践:避免在这个钩子函数中操作数据,可能会陷入死循环(可增加开关操作解决)
(7)beforeDestroy(销毁前)
(在服务端渲染期间不被调用)
当切换组件(当前组件未缓存)时,会执行beforeDestroy/updated钩子函数
组件状态:实例销毁之前调用,这一步,实例仍然可以使用,this仍能获取到实例
最佳实践:常用于销毁定时器、解除绑定全局时间、销毁插件对象等操作
(8)destroyed(销毁后)
(在服务端渲染期间不被调用)
组件状态:实例销毁后调用,调用后,vue实例指示的所有东西都会解除绑定,所有的事件监听器都被移除,所有的子实例也会被销毁
注意:(1)created阶段的ajax请求和mounted请求的区别:前者视图未出现,如果请求信息过多,页面会长时间处于白屏信息;
(2)mounted不会承诺所有的子组件也都一起被挂载,如果希望等到整个视图都渲染完毕,可以用vm.$nextTick;
2.组件之间的传值
父组件到子组件:在子组件标签上绑定自定义属性,属性值为父组件需要传递的数据,子组件内部通过props接收组件的属性名。(属性名一般以数组的形式)
子组件到父组件:在子组件标签上绑定自定义事件,值为父组件函数,子组件内部通过$emit给该事件推送数据,父组件内部通过函数参数进行接收。
平行组件的传值:通过eventbus的方式监听事件,首先需要先创建一个eventbus的方式监听事件,首先需要先创建一个eventbus的事件容器,哪里需要哪里引用。然后再通过emit派发事件,emit派发事件,on来接收。