更新用户资料信息后，右上角欢迎词依然显示旧的用户名，必须强制刷新页面后才显示更新后的用户名

有的读者不理解，更新资料时已经通过$router.push()刷新过页面了，为什么路径、表单数据都更新了，唯独欢迎词没有更新？原因在于 Vue 太高效了。因为$router跳转的是同一个页面，那么 Vue 就只会重新渲染此页面发生变化的组件，而那些 Vue 觉得没变化的组件就不再重新渲染。很显然 Vue 觉得页眉里的数据没发生变化，页眉的生命周期钩子mounted()没执行，欢迎词也就未更新了。

Vue 是基于组件的一套系统，如果组件和组件之间无法通信或传递数据，那无疑是没办法接受的。Vue 中父组件向子组件传递信息的方式就是Props了，接下来就用 Props 来“拐弯抹角”的实现欢迎词更新的功能。

可以看到组件是可以带参数的（也就是 Props 了），这个参数会传递到子组件中使用。

出现了一个新家伙：computed计算属性。乍一看这玩意儿和methods没啥区别，但实际上区别大了：

。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要与它有关系的参数没有发生改变，多次访问此计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，

也就是说，在它的执行过程中不能改变任何 Vue 所管理的数据，否则将会报错。计算属性是依赖数据工作的，副作用会使代码不可预测（鸡生蛋，蛋生鸡）。

一般来说，能用computed就尽量用它，不能的再考虑methods，算是用空间（缓存）换取时间（效率）吧。

你可能会问，既然父组件可以向子组件传递数据，那能不能子组件返过来传递 Props 给父组件呢？很遗憾这是不行的。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

大型项目中的数据和状态量是惊人的，建立一个蜘蛛网般复杂的数据通信结构，想想都很可怕。这时候你就需要用到Vuex了。

Vuex 是一个专为 Vue 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也就是说，Vuex 把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的；应用够简单，最好不要使用 Vuex。一个简单的store 模式就足够了。如果需要构建一个中大型单页应用，Vuex 将会成为自然而然的选择。

Props 虽然能够解决我们的问题，但总感觉有点别扭：为什么我要持有welcomeName和username两个状态？这两货不应该是同一个东西吗？

删除用户按钮通常会放在用户中心页面，并且为了避免用户误操作，点击后还要进行第二次确认，方可删除。

删除本身没什么好说的，与用户更新的实现方式大同小异。需要注意的倒是另外的小知识点：

看起来我们的博客逐渐有模有样了，但还是有很多不完美的地方。请尝试优化以下功能：