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中的某一个数组对象时，该页面视图不会跟着更新，解决办法就是定义多个变量将他们分离出来