内容

移动端值得注意的地方
Vue 中值得注意的地方（保持状态；vue-router 的版本问题；组件的递归调用）

Vue APP

1. 移动端 UI 组件库

不管是 PC 端，还是 APP 端，使用 vue 开发，组件化思想总是贯穿始终。那么好用的 UI 组件，在提高我们效率的同时，也为我们的项目锦上添花。此处 推荐：Vant，iconfont

2. 移动端布局

大部分网站采用 PC 端与 APP 端分离的布局方式，此处着重介绍 APP 端的布局方式：移动端常用布局；对于响应式布局，除了 rem ，比较常见的还有 vw 的单位。
对于 vw 单位， vscode 常用的快捷插件为：px-to-vw 可以在其中设置设计稿的大小，然后 Alt + z保存后自动转换为 vw 单位。

3. 布局文件的使用方式

对于全局都要用 到的样式文件，可以直接在 main.js 中引入；对于子组件的单独样式，尽量由自己控制，避免父组件样式过多，代码冗余。

Vue 中的注意项

1. vue中的状态保持

场景：一些文章分类，在点开文章详情后，在回退后，无法回到原分类位置

解决方案：

vue 官网的 keep-alive 介绍

1. 在 路由中写入 meta 配置项

 meta: {
            keepalive: true //用 keepalive 保持自己的状态，防止返回后，又跳转至首页
            }

2. 在 App.vue 中做判断（若通过就保持状态）

 <div id="app">
    <!-- 用 keepalive 保存用户状态 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive" />
  </div>

2. vue-router 报错

场景：

1. 二次以上点击报错
2. 当无携带 认证 条件时，强制刷新，重定向页面后，路由报错

解决方案：

1. 可判断前此次点击的跳转路径是否等于第一次（若不相等，就跳转）

if (this.$route.path != '/home') {
            this.$router.push('/home');
          }

2. 更改 VueRouter 的原型对象；抛出错误，让其捕获

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

3. 降低 vue-router 版本，在 3.0 之前 npm i vue-router@3.0 -s

3. 组件的递归调用

相信大家对于逻辑的递归并不陌生，但对于 vue 中组件的递归可能还不是很熟悉，此处着重介绍下 vue 中组件的递归调用。

场景：对于一些文章开放的评论功能，会形成叠加的评论树。此时数据的结构就会用到递归改造，组件的渲染当然也要用到递归渲染。

解决方案：

1. 数据类型处理如下：

let result = [{ comment_id: 76, user_id: 42, comment_date: "05-14", comment_content: "你好", parent_id: null },
    { comment_id: 78, user_id: 42, comment_date: "05-14", comment_content: "你也好", parent_id: "76" },
    { comment_id: 79, user_id: 42, comment_date: "05-14", comment_content: "你也是", parent_id: "78" },
    { comment_id: 80, user_id: 42, comment_date: "05-14", comment_content: "你也一样", parent_id: "79" },
    { comment_id: 81, user_id: 42, comment_date: "05-14", comment_content: "大家都好", parent_id: "80" },
    { comment_id: 82, user_id: 391, comment_date: "05-14", comment_content: "大家都一样", parent_id: "81" },
    { comment_id: 83, user_id: 42, comment_date: "05-14", comment_content: "", parent_id: null },
    { comment_id: 85, user_id: 487, comment_date: "05-14", comment_content: "我也觉得是", parent_id: "82" },
    { comment_id: 86, user_id: 487, comment_date: "05-14", comment_content: "不太一样", parent_id: "81" },
    { comment_id: 87, user_id: 391, comment_date: "05-14", comment_content: "哈哈哈", parent_id: "85" },
    { comment_id: 90, user_id: 548, comment_date: "05-15", comment_content: "D", parent_id: null },
    { comment_id: 93, user_id: 578, comment_date: "05-16", comment_content: "11111", parent_id: null },
    { comment_id: 94, user_id: 578, comment_date: "05-16", comment_content: "111111", parent_id: null },
    { comment_id: 95, user_id: 578, comment_date: "05-16", comment_content: "大家的bilibili做的怎么样了", parent_id: null },
    { comment_id: 103, user_id: 662, comment_date: "05-16", comment_content: "xcczzczxc", parent_id: "95" },
    { comment_id: 111, user_id: 229, comment_date: "05-17", comment_content: "giaogiao", parent_id: "78" },
]

//# 递归循环，得到评论树
function comment(temp) {
    var arr = []
    for (let i = 0; i < result.length; i++) {
        // 如果 parent_id 为 null 代表为 1 级评论，进行追加，如果 parent_id = comment_id 代表为其子评论，进行追加
        if (result[i].parent_id == temp) {
            arr.push(result[i])
            result[i].children = comment(result[i].comment_id)
        }
    }
    return arr
}

console.log(comment())

当数据过多时，递归改造就很合适。但对于使用同一个组件渲染来说，组件的结构就要和数据十分相似，那么组件的递归就很nice

<template>
<comment-list>
<comment-list></comment-list>
</comment-list>
</template>

<script>
export default {
  name: 'CommentList',
};
</script>

值得注意的是：组件本身调用本身时，无需导入组件，只要写上 name 属性即可