您现在的位置是:首页 >程序人生 >WEB前端

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

发布时间:2019-08-02 编辑:杰霖 浏览:3277 评论: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中的某一个数组对象时,该页面视图不会跟着更新,解决办法就是定义多个变量将他们分离出来