【vue】记一次移动端项目知识点

柔光的暖阳◎ 2022-12-11 15:04 185阅读 0赞

## 内容 ##

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

## Vue APP ##

##### 1. 移动端 UI 组件库 #####

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

##### 2. 移动端布局 #####

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

##### 3. 布局文件的使用方式 #####

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

## Vue 中的注意项 ##

##### 1. vue中的状态保持 #####

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

解决方案：

[vue 官网的 keep-alive 介绍][vue _ keep-alive]

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

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

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

##### 2. vue-router 报错 #####

场景：

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

解决方案：

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

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

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

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

1.  降低 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 属性即可

[Vant]: https://youzan.github.io/vant/#/zh-CN/quickstart
[iconfont]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[Link 1]: https://mp.csdn.net/console/columnManage/9945774
[vue _ keep-alive]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive