props接收后值刷新页面后消失

Question

老师您好！

     我props接收到值以后，再刷新后值不存在了，这个指有时效性吗？

     如要使用的话，常规方法是不是先用localstory保存下来呢？

Answer 1

提问者 qq_卖菜的鱼_0 2018-05-13 20:24:22

 。

Answer 2

Dell 2018-05-12 22:31:44

页面肯定被重新渲染了是吧

• 提问者 qq_卖菜的鱼_0 #1

  是的，第一次页面打开后，我把json数据修改掉，然后刷新页面，页面被新数据渲染了，但是props中的数据是空的。 我回头分析原因，看console打印执行顺序，第一次是组件home的api接口数据先执行，然后在执行子组件的props数据接受（代码写在计算属性中）。然后json数据改变后第二次刷下页面，发现子组件的计算属性先执行，然后才打印出home组件中的API数据。但是当我修改完（只改无关紧要的部分，仅测试页面加载顺序）代码再刷新后，又恢复正常了，先执行home的API再子组件接收。 所以对vue的页面加载顺序不太理解，请老师指点谢谢！

Answer 3

提问者 qq_卖菜的鱼_0 2018-05-12 21:11:34

我又研究了下代码。实际的问题可能是这样：我首先在home组件中请求了一次api，传给子组件。当时子组件接收到值（打印执行的顺序是先从home组件中收到接口数据，再打印出子组件中的相应值）。等页面再刷新时，子组件已被第一次数据渲染，打印的顺序变成了子组件的mounted先执行，然后才出来组件中api接口结果的返回信息。

初始页面执行：

homemenu结果:aaa

Menu1.vue?d40e:39 0

Home.vue?5584:59 {schoolCovers: Array(1), menutype: "3", systemFuncList: Array(6), FootFuncList: Array(4)}.

刷新后页面执行：

{schoolCovers: Array(1), menutype: "3", systemFuncList: Array(6), FootFuncList: Array(4)}

homemenu结果:aaa

Answer 4

提问者 qq_卖菜的鱼_0 2018-05-12 18:47:03

是的，props和state状态刷新就会消失，如果要持久保存，就需要localstorage