关于Vue生命周期的思考[zzky]

关于Vue生命周期的思考

关于Vue组件生命周期,官方图示:

Vue组件生命周期

在开发过程中遇到关于生命周期的问题,整理分享下:

Vue-router跳转同名路径的问题

问题来自:vue-router 跳转同名路径的问题

在社区交流中对于新手经常遇到这个问题。为什么跳转相同路由不能跳转?对于新手来说,跳转和不跳转的区别在于数据有没有更新。

新手在用Vue-router 的时候,没有关注当前Vue实例(vm)中添加route 。回归到话题问题当访问.../page/110这个路由的时候,<router-view ></router-view> 开始装载Vue-router 中注册page对应Vue实例。 我们先约定是 page.vuepage.vue 开始它的生命周期,如果没有使用过Vue-route会根据经验把数据更新写到 created 或者 ready 阶段。路由切换了,但是created ready 阶段都过了,装数据的盒子准备好了。但是数据更新的时期过了导致不能更新。

这时候,我们需要把数据更新的时机换到路由切换的时候。

如下代码:

export default {
      ...
    route: {
        data(transition) {
           //更新数据的方法    
        }       
    }
      ...
};

这样路由切换的时候,更新数据,也就是所谓的跳转了。

注意:更新params query 都适用

利用v-if强制结束组件的生命周期

基于上面如何更新子组件?一般情况下,同样更新数据放倒 route.data 中即可,向子组件中传递数据。随着route切换更新子组件数据。

开发过程中,遇到的一个特殊的例子。把轮播图做成组件,在这个组件中ready后,开始使用轮播插件。轮播插件是会破坏html结构。导致不能数据更新的时候,不能更新View。这时候解决办法是再让子组件带着新数据走一轮生命周期。

如何强制更新组件的生命周期?解决办法是 route.data 数据更新的时候。让子组件 v-if="false" ,异步获取数据之后,再 v-if="true"

说了一堆废话,汇总下:v-if 会影响子组件的生命周期。


幸运儿的前端打怪升级手册
I am not a designer nor a coder. I'm just a guy with a point-of-view and a computer.
916 声望
139 粉丝
0 条评论
推荐阅读
关于微信推送消息的调研记录(2019)
背景 计划写个定时提醒,用来提示写周报的。 自己的话就定闹钟好了,想顺便写了别人也能用的。 可选方案1.微信机器人 可用功能 定时提醒 关键字查询信息 关键字修改信息 更多其他 效果 实现思路 使用个人微信账号...

幸运儿阅读 2.7k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

916 声望
139 粉丝
宣传栏