vue项目中遇到的问题 2022.09.28周三

一、修改第三方组件库样式

需求：很多时候第三方组件库的样式不满足需求，需要进行修改

常见的方法：

方法一：/deep/

方法二：::v-deep

二、vue引入本地图片的特殊情况

介绍：除了img标签的src和css的background：url(),其他情况想要引用本地项目的静态资源图片需要用require(../../assets/img/aaa.png)的格式，而不能直接用../../assets/img/aaa.png格式引入。

示例：在某个组件内引用，如echart或G6引擎中的图标img或icon

icon: {
       show: true,
       cursor: pointer,
       img: require(../../assets/img/aa.png),
       width: 75,
       height: 91
     },

三、mounted生命周期里请求数据导致页面闪屏

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面完之前请求完成的话就不会看到闪屏了

四、修改完数据点击提交后，数据更新，但页面没有更新

原因：vue在视图更新时无法监测数组某个对象的属性值的变化（数组是引用数据类型，没有set和get方法）

解决方法：

方法一：this.$nextTick()

介绍：延迟执行回调，修改数据后调用这个方法，获取更新后的dom

方法二：this.$set(this.obj,key,val)

介绍：第一个参数是目标对象，第二个参数是要修改的数据下标，第三个参数是修改后的新值

方法三：this.$forceUpdate()强制刷新

五、深拷贝数组或对象

介绍：对象或数组的简单赋值，修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。

对于对象，可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。

对于数组，可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。

六、vuex数据刷新后消失问题

解决方法：获取到数据往store中存时，利用 window.localStorage.setItem(‘key’, value) 也存储一份相同数据 ，当在获取数据时判断存储的数据是否为空（如果是数组就判断长度是否为0，总之这儿就是判断），若不为空（数组长度不为0）直接获取，否则利用 window.localStorage.getItem(‘key’) 来获取。

示例：

vue组件中：

this.$store.commit(setUserId, item.id)
      window.localStorage.setItem(userId, JSON.stringify(item.id))

store中：

getters: {
    loginIn: state => {
      let loginIn = state.loginIn
      if (!loginIn) {
        loginIn = JSON.parse(window.localStorage.getItem(loginIn) || null)
      }
      return loginIn
    },
}

七、vue项目不兼容IE浏览器

1. 安装插件babel-polyfill

npm install --save-dev babel-polyfill

2.main.js导入

import babel-polyfill

八、路由懒加载（延迟加载）

非懒加载：

import Index from @/page/index/index;
export default new Router({  
    routes: [    
        { 
            path: /, 
            name: Index,     
            component: Index 
        }
    ]
})

懒加载：

export default new Router({
  routes: [    
        { 
            path: /, 
            name: Index, 
            component: resolve => require([@/view/index/index], resolve) 
        }
   ]
})