vue 使用问题总结

刺骨的言语ヽ痛彻心扉 2022-10-09 03:13 568阅读 0赞

### 1、怎么理解样式文件里的`/deep/` ###

**`/deep/`**

> 深度选择器：经常在开发中使用到组件库element-ui/ant-design等等，，若是想要对某个组件的样式进行调整但又不影响全局，，`/deep/`是个很好的选择，可以穿透scoped实现组件样式的修改，一般是在less、sass中使用

> `>>>`一般则在css中使用，因为有些像 Sass 之类的预处理器无法正确解析 `>>>`，它是`/deep/`的别名

/deep/.ant-upload-list-item-uploading { 
        margin-bottom: 8px;
    }

上述写法会被最终编译成

[data-v-58691842].ant-upload-list-item-uploading{ 
      margin-bottom:8px
    }

其中，`data-v-58691842`和当前文件被浏览器解析后产生的前缀`data-v-xxx`是一致的

### 2、vue文件被浏览器解析后的`data-v-xxx`是什么 ###

> 这是在标记vue文件中css/less时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的"data-v-xxx"标记

### 3、vue的兼容情况 ###

> Vue不支持IE8及其以下版本，因为Vue使用了IE8无法模拟的ecmascript 5 的特性。  
> 因为IE8及其以下的浏览器，对Object.defineProperty() 只能对DOM 对象使用。对原生对象使用该方法会报错。且无法shim

> shim：一种实现兼容的方法，一般是引入一个js库、插件之类的，用旧的API实现一些新的API的功能。  
> 比如常见的 html5shim.js ，就是为了解决低版本的浏览器上 不支持IE5的问题

### 4、怎么用手机浏览器访问本地vue项目 ###

*  手机和浏览器处于同一网络环境
 *  修改vue项目的配置文件，将`host`改为电脑的IP地址 `host:ip.address()`，启动项目
 *  手机浏览器访问对应ip地址即可

### 5、vue项目中是怎么解决跨域问题的 ###

首先必须明确一点：跨域是浏览器的安全策略导致的，而vue本身解决不了跨域，两者没有必然联系。。。。

但是，本地开发时，，大都会进行跨域请求接口数据。。。。。。。这时需要配置proxy/proxyTable（两者功能基本一样，对应的vue-cli版本不同）

proxy:{ 
      '/':{  
             target:'http://target.online.com:8090',
             changeOrigin:true,// 是否跨域
             secure:false //如果是https接口，需要配置这个参数
          }
      }

> proxyTable/proxy 是vue-cli脚手架在开发模式下给我们提供的一个跨域的代理中转服务器服务。基于http-proxy-middleware插件  
> 简单来说是，本地开发时会起一个本地nodejs服务，配置了proxy后，它会帮我们做跨域处理。。

> 项目部署到测试环境、线上环境后，大多情况下接口地址和请求地址已经保持一致了，不再发生跨域，，，，如果还是有跨域情况，，需要后端做下请求的转发或者origin的配置等

### 6、vuex为什么要通过mutation来修改state ###

> 通过mutation来修改state是官方要求的，符合规范的。这种方式修改state使得状态的变化是可追踪的。同时vue的调试工具可以追踪state的变化 。这样便于调试

> 当然也可以直接`this.$store.state.name="沈梦溪"`来修改。也是可以的。也能被watch到，也能触发更新。但是就是不符合规范，vue的调试工具也追踪不到state值的改变。

> 在创建store的时候设置严格模式`strict:true`，就只能通过mutation来修改state了，直接修改会报错

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(vuex)
    export default new Vuex.Store({ 
      strict:true, //严格模式，只能通过mutation修改state
      state:{ 
         name:''
      },
      mutations:{ 
         updateName(state,data){ 
           state.name=data;
         }
       }
    })

### 7、从页面a跳转到b页面时需要保存页面状态，跳转到其他页面则不需要保存页面状态 ###

首先，对页面a进行keep-alive缓存处理，，需要给页面a设置name

export default{ 
          name:"a"
      }

这样，就只对页面a进行了缓存处理

<keep-alive include="a">
         <router-view ></router-view>
      </keep-alive>

从页面a到b需要缓存，从页面a跳转到其他页面都不需要缓存  
由于已经对页面a进行了keep-alive处理，从页面a跳转到任何页面，页面a的状态都会被保存，，，，所以需要对跳转目标进行监听处理，，，，，

// 页面a中
      beforeRouteLeave(to,from,next){ 
        if(to.name==='b'){  
        //需要缓存不做什么任何处理
        }else{ 
            // 跳转到其他页面则需要对页面a的所有数据、状态进行重置
            this.form.resetFields();
            this.init();
        }
      }

也可借助state实现该功能。。当从页面a跳转到页面b时，设置state keepAlive=true，否则设置为false

然后在keep-alive组件独有的生命周期 activated()和deactivated()中，根据keepAlive的值决定是否重置该页面的值和状态。。。。

**注意**

> 对于进行了keep-alive缓存操作的页面，第一次进入该页面会依次执行 mounted()----activated()方法  
> 离开该页面会依次执行 beforeRouteLeave()—deactivated()—

### 8、state持久化存储 ###

vuex的state是保存在内存中的，页面刷新就会恢复原值，，，

那如何才能做到页面刷新也不重置state的值呢？

**8.1 基本方法**

*  监听页面的刷新事件，刷新前将想要持久化存储的state保存到localStorage中
 *  页面刷新结束，从localStorage中读取值，赋值给state，
 *  删除localStorage中的值

这样，就实现了state即使页面刷新也不重置

**8.2 监听刷新事件，刷新前保存state到localStorage**

需要在某个事件或vue的生命周期中完成该动作

`onbeforeunload`事件在即将离开当前页面（刷新或关闭）时触发。

window.onbeforeunload=function(e){ 
       localStorage.setItem('stateNameBK',this.$store.state.name);
    }

**8.3 页面刷新完毕，从localStorage中取值并赋值给state**

> 注意：onload()是不行的，，onload()事件的触发是包括vue生命周期的beforeCreate()、created()、mounted()等等最晚的，，如果在onload()中进行state的赋值会造成state从默认值到赋值完毕导致的页面闪烁

### 9、从面包屑回退 ###

从首页开始，选择模块、进入模块A页，在模块A页面中挑选版本，进入版本C页，在点击详情进入详情页，，，， 而当前就位于详情页，，想直接通过点击面包屑返回到模块A页面、版本C页面 该怎么做呢？

目前面包屑是`首页--模块A--版本C--详情`

**this.$router.currentRoute.matched**

> 这是一个数组，内容是从路由根节点到当前路径的匹配项  
> 每一层路径就是一个数组项

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]  
对应的router配置信息如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]  
返回模块A或者版本C页面，需要知道对应的参数值 ,

解决方法很简单：当前处于详情页，当前页的路径中包含所需的所有参数值，，，，，，只需要将`this.$router.currentRoute.matched`里的每一项中的path里的动态参数名和动态参数值一对一进行替换，，即可得到正确的带有参数的路径实现页面的跳转了，，

上述代码的返回值为数组，内容分别是 模块A、版本C、详情页需要在面包屑中展示的文字和跳转路径。

### 10、element-ui 组件单个引入 ###

**10.1 安装插件**  
`cnpm install babel-plugin-component`

**10.2 修改babelrc文件**

{ 
      "presets": [["es2015", {  "modules": false }]],
      "plugins": [
        [
          "component",
          { 
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

**10.3 入口文件中按需引入**

import {  Button, Select } from 'element-ui';
    import App from './App.vue';
    
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    /* 或写为 * Vue.use(Button) * Vue.use(Select) */

### 11 watch和computed的区别 ###

> `watch`，主要是为了监听某个数据的变化，强调的是当被监听的数据发生变化时要做的一系列后续操作

> `computed`，基于数据的数据，它依赖一个或多个数据。当所依赖的任一数据发生变化时，会自动监听依赖值的变化。从而动态返回新的值。主要是为了简化模板内的复杂运算。

> 总结一下：如果只是需要动态值，就使用computed，如果是监听值的改变后做某些动作 就使用watch

### 12、vue项目中使用iconfont ###

虽然不少组件库都会内置一些icon，但有时这些icon还是不够丰富，这时可以使用iconfont

**1、unicode方式**  
在style中引入在线地址/下载到本地后引用

@font-face { 
        font-family: 'iconfont';  /* project id 2104650 */
        src: url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.eot');
        src: url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.woff') format('woff'),
        url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_2104650_knp1hlrl5x.svg#iconfont') format('svg');
      }

使用时，class=Unicode码即可

使用总结：

*  兼容性最好，支持IE6+
 *  不支持多色。

**2、font class 方式**

> 生成在线css，引用。

> 在页面中使用

总结：

*  兼容性良好，支持IE8+
 *  相比于Unicode，书写和使用更加简单直观
 *  不支持多色

**3、symbol方式（支持多色图标 ）**

> 选择symbol方式，并在线生成js代码  
> 在index.html中引入这个js文件。这个js的作用是在文档中生成svg symbol。  
> 在页面中使用

总结：

*  支持多色
 *  兼容性的话，支持IE9+

### 13、vue中页面跳转的几种方式 ###

页面跳转是非常常见的操作，根据实际情况，有很多种方式实现页面太OA转，，，，，  
假设现在处于页面A，路径是`/a`，

**1、router-link**

使用vue提供的router-link实现页面跳转，，，，，path方式

<router-link :to="{path:'b'}">这里</router-link>
      <router-link :to="{path:'/b'}">这里</router-link>
      <router-link :to="{path:'#/b'}">这里</router-link>
      <router-link :to="{path:'#b'}">这里</router-link>

可以看到，path的写法有些不同，，，，，，path不同，最终的跳转地址会有些许差异

<table> 
 <thead> 
  <tr> 
   <th>path</th> 
   <th>前缀</th> 
   <th>跳转到的地址</th> 
   <th>释义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>b</code></td> 
   <td>无</td> 
   <td><code>/b</code></td> 
   <td>路径替换</td> 
  </tr> 
  <tr> 
   <td><code>/b</code></td> 
   <td><code>/</code></td> 
   <td><code>/b</code></td> 
   <td>路径替换</td> 
  </tr> 
  <tr> 
   <td><code>#/b</code></td> 
   <td><code>#/</code></td> 
   <td><code>/a/b</code></td> 
   <td>追加</td> 
  </tr> 
  <tr> 
   <td><code>#b</code></td> 
   <td><code>#</code></td> 
   <td><code>/a/b</code></td> 
   <td>追加</td> 
  </tr> 
 </tbody> 
</table>

使用vue提供的router-link，和name结合，实现页面跳转，，，使用name时直接是，，，路径替换，，，，

<router-link :to="{name:'b'}">这里</router-link>

**2、router.push()、router.replace()、router.go()**

*  `router.push({path:'/b'})`跳转到某个子页面，并在history中添加一条记录
 *  `router.repalce({path:'/b'})`替换当前的页面，其实也可以理解为跳转，和push的区别就是不会在history中添加记录
 *  `router.go(-1)`刚才提到的history，在go()中被使用，跳转到上一页就go(-1)，跳转到下一页就go(1)，当然实现跳转的前提都是history中有记录。

> 当参数`path`以`#`打头表示路径追加，，，，，，，没有前缀或前缀以`/`打头 表示路径替换

**3、打开新窗口并进入另一个页面**

目前vue未提供这样的方式，，，可以使用a标签、window.open()等方式实现

<a href="#/b" target="_blank">这里</a>
     //或者
     window.open('#/b')

> 使用`a`标签 或者`window.open`等方式进行页面跳转时需要写上目标地址的完整路径

### 14 、修改组件库的主题色 ###

项目当前使用的是组件库 ant-design-vue ，，默认主题色是蓝色的，，想要更换主题色到其他颜色比如绿色、粉色什么的，就需要自定义下主题，，  
大致分为以下几步

下面说下我的实现方式。。。

> webpack 4.x 以上  
> less-loader 6.x 以上

**1、修改`webpack.base.config.js`**

module:{ 
     rules:[
         ...// 其他别的规则
          { 
                    test: /\.less$/,
                    //use: ['vue-style-loader', 'css-loader', 'less-loader']
                    use: [
                        { 
                            loader: 'vue-style-loader'
                        },
                        { 
                            loader: 'css-loader'
                        },
                        { 
                            loader: 'less-loader',
                            options: { 
                                lessOptions: { 
                                    modifyVars: { 
                                        'primary-color': '#1DA57A'
                                    },
                                    javascriptEnabled: true
                                }
                            }
                        }
                    ]
                },
      ]
    }

**2、修改babelrc文件**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IOW6IOW5oiR5pyJ54K554Om_size_20_color_FFFFFF_t_70_g_se_x_16]  
**3、注意less-loader的版本**  
需要在6.0 以上，，，，刚开始改的时候less-loader的版本是5.0.0 然后就是一直不可以。。。。重新指定版本安装了下就可了。。

> 通过以上几步，重新启动项目可以看到项目主题色已经变成绿色的，，，但是，，，，，，改变的只有a标签、button的颜色，，其他的，，像是 checkbox/radio/message提示消息的颜色改动，，还需要再次手动设置，，可参考官网。。。

### 15、取消http请求 ###

在新建某个xx时，点击确认后发出了新建xx的http请求，，在请求未详情之前想撤销/取消这个请求，改如何处理呢

**1、axios 取消请求**

> 使用`cancel token`取消请求  
> axios的`cancel toekn`API基于cancelable promises proposal，它还处于第一阶段

使用CancelToken.source工厂方法创建cancel token，

或者通过传递一个executor函数到CancelToken的构造函数来创建cancel token:

const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.get('/user/12345', { 
      cancelToken: new CancelToken(function executor(c) { 
        // executor 函数接收一个 cancel 函数作为参数
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();

### 16、父子组件的生命周期的触发顺序 ###

现有父组件iParent，它引用了子组件ChildA、ChildB，那么父子组件的生命周期的触发顺序是怎样的呢 ？

<i-parent>
       <child-a />
       <child-b />
    </i-parent>

本地试验结果如下图  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IOW6IOW5oiR5pyJ54K554Om_size_15_color_FFFFFF_t_70_g_se_x_16]1、先触发哪个子组件的生命周期和其被引用的前后顺序有关， 先被引用的先触发

2、父组件的生命周期是最先触发的，，，beforeMount触发了之后，在依次按照子组件的引用顺序触发对应的生命周期直至beforeMount触发后，，触发下一个子组件的，，

3、mounted生命周期的触发顺序 上，父组件是最后触发的，，， ， 子组件方面，谁先被引用谁先触发 ，，，本地试了下 和组件的内容的多少无关，，，

> 原理：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]: /images/20221005/7ec9f9bc920d49eba473399d8518c27d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]: /images/20221005/6197f4b783194781826f52fba11c8bb7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IOW6IOW5oiR5pyJ54K554Om_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221005/282c4da927664853b14bed4dfde68e36.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6IOW6IOW5oiR5pyJ54K554Om_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20221005/c59c0ebb5a0e47e3bf0af1fb18d6e47a.png