vue的生命周期就是vue实例从创建到销毁的过程
这些钩子函数会在生命周期的不同阶段被调用
例如:
created ——>实例创建后执行代码
第一次加载执行前四个
beforeCreat()
实例初始化前 在这个阶段定义的变量值还获取不到
created()
实例初始化后 (已经new完了) 在这个阶段可以获取到定义的变量 以及发送AJAX请求
beforeMount()
vue的虚拟DOM,挂载到真实的网页之前
在这个阶段页面还没有渲染完成 ,所以不能操作DOM
mounted()
vue的虚拟DOM,挂载到真实的网页上(页面已经被渲染到浏览器里面)——>组件已经被渲染完成了 在这个阶段才可以操作DOM( 但是在vue中最好不要操作DOM,数据驱动视图)
有点类似于window.onload ——>页面渲染完成了才会执行
改动数据以后才会触发 下面这两个函数
beforeupdate()
更新前 如果有新增的元素,就会触发这个函数。但是现在页面还没有更新,所以获取不到新增的元素
updated()
更新后
beforeDestroy()
销毁前——>( 清除定时器 / 解绑JS定义的事件)
destroyed()
销毁
2.5新增——>errorCaptured
当捕获一个来自子孙组件错误的时候会被调用
这个钩子会收到三个参
1.错误对象 2.发生错误的组件实例 3.包含错误来源信息的字符串
这个钩子可以返回false以阻止该错误继续向上传播
关与父子嵌套情况下的更新说明
1.子组件中没有数据更新
第一次加载页面时,先执行父组件前三个生命周期——>再执行子组件的4个生命周期,等子组件执行到mounted之后,再执行父组件的mounted
2.父组件中有数据更新,但是子组件没有时
父组件数据发生改变,父组件执行beforeupdate和update。不影响子组件函数执行——>因为vue是局部更新,子组件没有变化
父组件传给子组件数据,父组件执行beforeupdate和update。但是子组件并没有使用,也不会触发子组件中的函数
3.父组件中有数据更新,子组件使用该数据时
父子组件中的beforeupdate和update都有执行——>先执行父的beforeupdate,然后等子组件执行完