当前位置: 首页 > Web前端 > vue.js

前端实训-中级阶段(34)-Vue生命周期

时间:2023-03-31 18:20:22 vue.js

最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门,但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂(HTML/CSS/JS),本着提高技术水平,夯实基础知识的中心思想,开课(每周四)。生命周期钩子的this上下文指向调用它的Vue实例,因此不能使用箭头函数来定义生命周期方法(例如created:()=>this.fun())。在测试页面可以看到箭头函数的所有值都获取不到,因为箭头函数的this不能修改。beforeCreate在实例初始化之后调用,在数据观察器和事件/观察器事件配置之前调用。调用事件配置前,什么叫数据观察者(dataobserver)和event/watcher?通过上面的测试页面可以看到beforeCreateundefinedundefinedundefined。在这个钩子函数中,我们不能访问data中的变量,也不能访问methods中创建的方法。它在创建实例后立即被调用。在这一步中,实例完成了以下配置:数据观察者、属性和方法的操作、watch/event事件回调。到这一步,已经观察到数据了,也可以用我们的方法了。一般在这一步拉取接口数据。但它还没有挂载到DOM上,$el属性目前没有任何价值。beforeMount在挂载开始之前被调用:关联的渲染函数被第一次调用。这一步会判断是否有el参数,如果没有则等待vm.$mount(el)再次触发。如果有el参数,则开始判断是否有模板参数(这里不能只用运行时环境的vue,因为需要解析模板),如果有,则将解析后的模板渲染成render函数,以及不使用el的innerHTML编译。BeforeMount,在beforeMount的处理流程中有一个带有el参数的render函数。使用render函数直接渲染模板参数,将模板参数解析到render函数中,然后rendernoneofabove。使用el的innerHTML编译成render函数,然后不带el参数渲染,等待vm.$mount(el)挂载后调用挂载的实例,替换DOM。请注意,mounted不保证所有子组件也一起安装。如果你想等到整个视图都被渲染完,你可以在mounted:mounted:function(){this.$nextTick(function(){//Codethatwillrunonlyafterthe//entireviewhasbeenrendered})}beforeUpdate在更新数据时调用,在修补虚拟DOM之前。这适用于在更新之前访问现有的DOM,例如手动移除添加的事件监听器。updated该钩子在虚拟DOM由于数据更改而重新渲染和修补后调用。调用此挂钩时,组件DOM已更新,因此您现在可以执行依赖于DOM的操作。然而,在大多数情况下,您应该避免在此期间更改状态。如果您想响应状态变化,通常最好改用计算属性或观察者。请注意,updated并不能保证所有子组件都一起重绘。如果你想等到整个视图重绘,你可以在updated中使用vm.$nextTick:updated:function(){this.$nextTick(function(){//只有在整个视图重绘后才会运行的代码//hasbeenre-rendered})}activated当激活缓存中的组件时调用。第一次渲染时不会触发,再次激活时会触发(createdandmounted再次激活时不会触发)。所以如果再次进入时要更新数据,就需要在这里处理。当keep-alive缓存的组件被停用时,将调用deactivated。beforeDestroy在销毁实例之前调用。在这一步,实例仍然完全可用。这里,一般要注意解绑定事件,否则就是内存泄漏。被销毁的实例在被销毁后被调用。钩子调用后,该Vue实例对应的所有指令都被解除绑定,所有的事件监听器被移除,所有的子实例也被销毁。当捕获来自后代组件的错误时调用errorCaptured。该挂钩接收三个参数:错误对象、发生错误的组件实例以及包含错误来源信息的字符串。该钩子可以返回false以防止错误进一步向上传播。您可以在此挂钩中修改组件的状态。因此,在捕获错误时在模板或渲染函数中设置条件以绕过其他内容非常重要;否则组件可能会进入无限渲染循环。错误传播规则默认情况下,如果定义了全局config.errorHandler,所有错误仍将发送给它,因此这些错误仍将报告给单个分析服务。如果一个组件的继承或父依赖中有多个errorCaptured钩子,它们将针对同一个错误被一个一个地调用。如果errorCaptured钩子本身抛出错误,则新错误和先前捕获的错误都将发送到全局config.errorHandler。errorCaptured挂钩可以返回false以防止错误向上传播。本质上是说“这个错误已经被修复,应该被忽略”。它可以防止此错误调用任何其他errorCaptured挂钩和全局config.errorHandler。微信公众号:前端linong参考前端培训目录,前端培训规划,前端培训计划https://cn.vuejs.org/v2/api/#...