N fix

Author: stacklens

md/270-资料删除与组件通信.md

@@ -1,14 +1,14 @@
 在实现**用户资料的删除**之前，先解决上一章的遗留问题：**更新用户资料信息后，右上角欢迎词依然显示旧的用户名，必须强制刷新页面后才显示更新后的用户名**。
 
-有的读者不理解，更新资料时已经通过 `$router.push()` 刷新过页面了，为什么路径、表单数据都更新了，唯独欢迎词没有更新？原因在于 Vue 太**高效**了。`$router` 跳转的是同一个页面，那么 Vue 就会重新渲染此页面发生变化的组件，而那些 Vue 觉得没变化的组件就不再重新渲染。很显然 Vue 觉得页眉里的数据**没发生变化**，生命周期钩子 `mounted()` 没执行，欢迎词也就未更新了。
+有的读者不理解，更新资料时已经通过 `$router.push()` 刷新过页面了，为什么路径、表单数据都更新了，唯独欢迎词没有更新？原因在于 Vue 太**高效**了。因为 `$router` 跳转的是同一个页面，那么 Vue 就**只会**重新渲染此页面发生变化的组件，而那些 Vue 觉得没变化的组件就不再重新渲染。很显然 Vue 觉得页眉里的数据**没发生变化**，页眉的生命周期钩子 `mounted()` 没执行，欢迎词也就未更新了。
 
-> Vue 查看的仅它自己管理的数据。显然 localStorage 不在此列。
+> Vue 查看的仅它自己管理的数据。显然 localStorage 里保存的登录标志变量不在此列。
 
 我们用两种方式来解决此小问题。
 
 ## 组件通信
 
-Vue 是基于组件的一套系统，如果组件和组件之间无法**通信**或**传递数据**，那无疑是没办法接受的。Vue 的实现方式就是 `Props` 了，接下来就用 Props 来“拐弯抹角”的实现欢迎词更新的功能。
+Vue 是基于组件的一套系统，如果组件和组件之间无法**通信**或**传递数据**，那无疑是没办法接受的。Vue 中父组件向子组件传递信息的方式就是 `Props` 了，接下来就用 Props 来“拐弯抹角”的实现欢迎词更新的功能。
 
 首先修改 `UserCenter.vue`：
 
@@ -59,7 +59,7 @@ Vue 是基于组件的一套系统，如果组件和组件之间无法**通信**
 
 可以看到组件是可以带参数的（也就是 Props 了），这个参数会传递到**子组件**中使用。
 
-> 又一次看到了 `:welcome-name` 这种带冒号的写法了。重申一次，冒号表示这个属性被双向绑定到了 Vue 所管理的数据上。如果你不需要绑定只是传递一个确定的数据，那么去掉冒号即可。`:` 就是 `v-bind:` 的简写形式。
+> 又一次看到了 `:welcome-name` 这种带冒号的写法了。重申一次，冒号表示这个属性被双向绑定到了 Vue 所管理的数据或表达式上。如果你只是传递一个固定值（如字符串），那么去掉冒号即可。`:` 就是 `v-bind:` 的简写形式。
 
 然后修改 `BlogHeader.vue` ：
 
@@ -230,7 +230,7 @@ Props 虽然能够解决我们的问题，但总感觉有点别扭：为什么
 
 是不是比 Props 的方式要更加适合一些呢。
 
-接下来处理用户删除的功能。
+关于组件通信的介绍就告一段落了。接下来处理用户删除的功能。
 
 ## 用户删除
 
@@ -309,36 +309,30 @@ Props 虽然能够解决我们的问题，但总感觉有点别扭：为什么
         width: 80px;
         background-color: darkorange;
     }
-
     .delete-btn {
         background-color: darkred;
         margin-bottom: 10px;
     }
-
     .shake {
         animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
         transform: translate3d(0, 0, 0);
         backface-visibility: hidden;
         perspective: 1000px;
     }
-
     @keyframes shake {
         10%,
         90% {
             transform: translate3d(-1px, 0, 0);
         }
-
         20%,
         80% {
             transform: translate3d(2px, 0, 0);
         }
-
         30%,
         50%,
         70% {
             transform: translate3d(-4px, 0, 0);
         }
-
         40%,
         60% {
             transform: translate3d(4px, 0, 0);
@@ -350,7 +344,7 @@ Props 虽然能够解决我们的问题，但总感觉有点别扭：为什么
 删除本身没什么好说的，与用户更新的实现方式大同小异。需要注意的倒是另外的小知识点：
 
 - 确认删除按钮的出现是带有**动画**的（横向抖动）。上面代码的一半内容都是样式，定义了按钮的外观、动画和关键帧。Vue 2 和 Vue 3 的过渡动画有较大差别，详见 [Vue 2 动画](https://cn.vuejs.org/v2/guide/transitions.html) 和 [Vue 3 动画](https://v3.vuejs.org/guide/transitions-overview.html)。
-- 符号 `@` 是 `v-on:` 的缩写，与冒号的作用类似。
+- 符号 `@` 是 `v-on:` 的缩写。
 
 看看效果：
 
@@ -363,6 +357,6 @@ Props 虽然能够解决我们的问题，但总感觉有点别扭：为什么
 
 看起来我们的博客逐渐有模有样了，但还是有很多不完美的地方。请尝试优化以下功能：
 
-- 用户登出有不同的地方都用到了，可抽象为独立模块。
+- 用户登出在多个地方都用到了，可抽象为独立模块。
 - 未登录用户通过输入 url 的方式还是可以到达其他用户的用户中心页面（虽然不能进行危险操作），请优化使用户中心页面仅本人可查看。
 - 每当页面刷新时，页眉都会向后台发送请求确认登录状态。是否可以利用缓存，减轻后端压力？