vue 生命周期

最近一直在加班，都没时间学习，真的是对于vue的知识没有多少进步，昨天还在公司加班，今天抽空学习一下生命周期吧。

生命周期基本介绍

官方文档相关介绍生命周期。

还是先举例子：

进入路由页面

得到结果：

• beforecreated：el 和 data 并未初始化 
• created:完成了 data 数据的初始化，el没有
• mounted ：完成了 el 和 data 初始化 

离开当前路由

得到结果：

 

包含子组件的生命周期

得到结果：

• 子组件的创建在父组件beforeMount之后，而不是在父组件create之后
• 父组件挂载必须在子组件挂载成功之后才会开始

父组件更新data

将父组件的setTimeout函数注释去掉

得到结果：

• 父组件的页面重新渲染不会影响到子组件

子组件更新data

注释父组件的setTimeout，将子组件的setTimeout事主是去掉

得到结果

• 子组件的页面重新渲染不会影响到父组件

父组件更新传递给子组件的prop

修改代码，子组件接受父组件的props

父组件在1000ms之后修改子组件的props，并且子组件接受该参数在页面显示

var self = this;
setTimeout(() => {
  self.childMessage = "修改子组件props";
}, 1000);

得到结果：此时产生两次父组件的更新，一次子组件的更新

猜测：父组件的第一次更新为父组件向子组件传递值的内容变化引起，第二次为子组件页面的重新渲染引起。为了侧面查看，我在父子组件的输出内容里，输出了子组件的parentMessage属性值。

输出结果：父组件的第二次更新为子组件渲染过程

父组件beforeUpdate 更新前状态===============》
index.vue?6c72:83 更新子组件的prop
index.vue?6c72:86 父组件updated 更新完成状态===============》
index.vue?6c72:91 更新子组件的prop
index.vue?6c72:78 父组件beforeUpdate 更新前状态===============》
index.vue?6c72:82 message: 测试生命周期以及路由
index.vue?6c72:83 更新子组件的prop
index.vue?ee1d:60 子组件beforeUpdate 更新前状态===============》
index.vue?ee1d:65 修改子组件props
index.vue?ee1d:68 子组件updated 更新完成状态===============》
index.vue?ee1d:73 修改子组件props
index.vue?6c72:86 父组件updated 更新完成状态===============》
index.vue?6c72:91 修改子组件props

问题：子路由创建数据然后跳转父路由列表，父路由上的设置依然存在

这个问题的来源为：项目开发中，碰到主页面为数据列表，带有查询条件以及分页信息，主页面可以跳转到添加页面，添加页面数据之后，跳转回到列表页面，不想之前的查询信息以及分页信息会改变。

这里需要将主列表数据页面设置成父路由，然后添加页面设置为子路由，为了在渲染子路由页面的时候父路由信息不显示，需要使用v-show进行处理，但是不能使用v-if。v-if会造成页面的重新渲染。

联系：从上面的生命周期可以看到当路由重新跳转到主路由的时候，会有着对应生命周期方法触发，所有对于列表数据的更新只需要在对应生命周期方法执行就可以了。

之前有看过keep-alive也有着类似的效果，还没有去研究过，后面去学习吧。希望年后回来找个好工作！

 

参照：

• https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
• https://segmentfault.com/a/1190000008010666?utm_source=tag-newest