chore: add tips at new syntax

Author: chengpeiquan

docs/guide.md

@@ -2168,6 +2168,12 @@ counter(1)  // The current count is: 1.
 counter('2')  // The current count is: 2.
 ```
 
+:::tip
+注意在上面 `counter` 函数的 `console.log` 语句里，我使用了一个 `{{ templateLiterals }}` 符号来定义字符串，这是 ES6 语法里的 [模板字符串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals) ，它和传统的单引号 / 双引号相比更为灵活，特别是遇到字符串需要配合多变量拼接和换行的情况。
+
+对 JavaScript 后面推出的新语法不太熟悉的话，很容易和单引号混淆，在学名上，它也被称之为 “反引号” （ Backquote ） ，你可以使用标准键盘的 `ESC` 键下方、也就是 `1` 左边的那个按键打出来。
+:::
+
 在实际的业务场景中，例如 Vue 的路由在不同的数据结构里也有不同的类型，有时候我们需要通过路由实例来判断是否符合要求的页面，也需要用到这种联合类型：
 
 ```ts{5}
@@ -3135,10 +3141,6 @@ Vite 是基于浏览器原生的 ES Module ，所以不需要预先打包，而
 
 在 Webpack ，你可以使用 `{{ env }}` 来区分开发环境（ development ）还是生产环境（ production ），它会返回当前所处环境的名称。
 
-<script setup>
-const env = 'process.env' + '.NODE_ENV'
-</script>
-
 在 Vite ，你还可以通过判断 `import.meta.env.DEV` 为 `true` 时是开发环境，判断 `import.meta.env.PROD` 为 `true` 时是生产环境（这两个值永远相反）。
 
 有关环境变量的问题可以查阅以下文档：
@@ -3154,6 +3156,11 @@ Vite|[环境变量和模式](https://cn.vitejs.dev/guide/env-and-mode.html)
 
 如果你有兴趣，可以根据知识点自行 Google 更多资料去延申阅读，在前端工程化，每个知识点都很值得深入研究。
 
+<script setup>
+const env = 'process.env' + '.NODE_ENV'
+const templateLiterals = '``'
+</script>
+
 <!-- 谷歌广告 -->
 <ClientOnly>
   <GoogleAdsense />

docs/links.md

@@ -64,6 +64,10 @@ Vite|[点击访问](https://cn.vitejs.dev/)
 
 考虑到后面还会不定期更新内容，所以我翻了一下之前跟朋友的微信聊天记录，在这里简单记录一下大版本的更新节点，当文档有再次更新的时候，方便读者们查阅。
 
+### 2022-06-23
+
+根据 [#163 (comment)](https://github.com/chengpeiquan/learning-vue3/issues/163#issuecomment-1163008926) 的反馈，对一些 ES6+ 可能容易混淆的新语法进行了一些 Tips 补充，减少学习过程中的理解成本。
+
 ### 2022-05-03
 
 更新了 “升级与配置” 一章的部分内容：