vue 使用问题汇总

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()