vue技术栈使用过程中遇到的一些问题以及解决之道

发布时间：2019-08-02 编辑：杰霖 浏览：5273 评论：0

1.vue-router与nuxt-link使用跟路径（'/'）作为路由地址时，点击其他路由会出现'/'路由高亮效果不消失的情况，加上exact可以解决该问题

2.vue methods方法中使用过滤器

this.$options.filters['resultKey'](result);

其中resultKey为过滤器的方法名，result为要过滤的对象

 

3.某些情况下为了dom加载完成再调用方法，通常为mounted函数中加个延迟函数，一般为20ms，因为浏览器的刷新时间一般为17ms

mounted() {

    setTimeout(() => {

        this._initSlider()

      }, 20)

    }

 

4.nuxt中使用高德地图,使用cdn方式引用，如果一进页面就要显示地图需要dom加载完成才能调用地图的方法（SSR渲染），看上面的例子！

api:  http://webapi.amap.com/maps?v=1.4.4&key=你申请的key

 

local为经纬度

loadmap(local) {

    const map = new window.AMap.Map('mapContainer', {

      resizeEnable: true,

      zoom: 18,

      center: local

})

var marker = new AMap.Marker({

      position: local, //默认的地图中心经纬度

 })

marker.setMap(map);

 //设置介绍信息

var info = new AMap.InfoWindow({

     content: "我在这里",

     offset: new AMap.Pixel(0, -28)

 })

info.open(map, marker.getPosition())

map.setFitView();

 }

 

5. 在data中引用资源的路径问题

正确的写法(图片必须是相对路径且必须加上require)  url: require('../../assets/img/blank_image_qrcode_small@2x@2x.png')

错误的写法：url: '../../assets/img/blank_image_qrcode_small@2x@2x.png'

 

6.通过v-for遍历路由

错误的写法:  此写法不会生效

正确的写法: <router-link v-for="“url" in="" links”="" :to="‘{path:" url.url}'=""> 

 

7.在vue中使用音频播放器或视频播放器src的加载问题

错误的写法:这样写将无法进行播放

正确的写法: 应该在事件中加载 this.$refs.music.src = this.music.url 

 

8.音频播放器暂停Uncaught (in promise) DOMException

我的解决方法是通过setTimeout延迟的方式在监听播放和暂停的状态

出现上述错误的写法:

watch: {    // 当playing状态改变时自动触发播放和暂停按钮

    playing() {

        this.playing ? this.$refs.bgMusic.play() : this.$refs.bgMusic.pause();

    }

} 

解决错误的写法:

watch: {

      playing() {

         setTimeout(() => {

            return  this.playing ? this.$refs.bgMusic.play() : this.$refs.bgMusic.pause();

          }, 300);

      }

  } 

 

 

9.使用better-scroll插件的注意事项

wrapper与content的高度问题:只有content的高度大于wrapper的时候,才可以滚动,需要给wrapper设定max-height:(高度根据实际情况自定义),另外wrapper加上overflow:hidden属性

 

10.当页面有使用定时器时，在离开页面时需要在生命周期函数destroyed()销毁该定时器,以此来优化内存

destroyed() {

  clearTime(this.timer)

}

11.使用better-scroll渲染带有图片路径返回的data时出现无法滚动的现象

原因是当图片还没加载完成better-scroll就已经计算了dom的高度，应该在数据或者图片渲染后重新计算，使用better-scroll的refresh()方法

loadImage() {
　if (!this.checkloaded) {
　　　this.checkloaded = true
　　　this.$refs.scroll.refresh()
　}
}

this.checkloaded是对多张图片进行优化，如果有一张的图片已经加载好就不需要再重新去计算dom的高度

12.better-scroll 点击事件与fastclick点击事件相冲突导致图片点击无反应

只需要将需要点击的图片添加fastclick默认的class属性即可needsclick,表示监听该属性 如果需要点击时则不拦截点击事件

13.当后端的数据结构返回比较复杂时，导致vue更新data后视图无法实时更新，使用this.$forceUpdate()也无效

如 obj = {

[],[],[],score: 4.5

}

一个对象包含多个数组再加上一些其它的属性，当你更改了obj中的某一个数组对象时，该页面视图不会跟着更新，解决办法就是定义多个变量将他们分离出来

14.解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

可以定义一个上传图片的方法，将图片上传到服务器，将返回的地址加载到富文本编辑器中

上传组件：
富文本：

上传方法
 UploadImageEditor(file) {
      if (
        !(
          file.raw.type === "image/png" ||
          file.raw.type === "image/gif" ||
          file.raw.type === "image/jpg" ||
          file.raw.type === "image/jpeg"
        )
      ) {
        this.$message.error(
          "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片"
        );
      }
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$message.warning("图片大小必须小于2M");
        this.$refs.quillUploader.clearFiles();
        return;
      }
      const formData = new FormData();
      formData.append("file", file.raw);
      const uploadLoading = this.$loading({
        lock: true,
        text: "图片上传中",
        spinner: "el-icon-loading",
      });
      // 这是封装的上传图片返回url接口
      updataImage(formData)
        .then((res) => {
          uploadLoading.close();
          if (res.data.code == 200) {
            const url = "https://qn.xxxxxxxxxxx/" + res.data.data;
            let quill = this.$refs.myQuillEditor.quill;
            let length = quill.getSelection().index;
            // 图片上传到对象存储后的具体地址
            quill.insertEmbed(length, "image", url);
            // 调整光标到最后
            quill.setSelection(length + 1);
          } else {
            this.$message.error(res.data.msg);
          }
          this.$refs.quillUploader.clearFiles();
        })
        .catch((err) => {
          uploadLoading.close();
          this.$message.error(err);
          this.$refs.quillUploader.clearFiles();
        });
    },
     

15.el-select 选择对象 value-key属性

16.当axios需要传送application/x-www-form-urlencoded格式参数的问题

方案1：

var qs = require('qs');

qs.stringify({ loginName: this.userName, loginPwd: this.password })

方案2：

let param = new URLSearchParams();

param.append("loginName", this.userName);

param.append("loginPwd", this.password);