vue问题

作者: 稀释1 | 来源:发表于2020-12-28 10:50 被阅读0次

1.定时器

data() {
    return {
        timer: null  // 定时器名称
    }
},

使用定时器

this.timer = (() => {
    // 某些操作
}, 1000)

最后在beforeDestroy()生命周期内清除定时器:

beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
}

方案1有两点不好的地方,引用尤大的话来说就是:

  • 它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
  • 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。

解决方案2

该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码:

const timer = setInterval(() =>{
    // 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})

方案2要感谢@zzx18023在评论区提供出的解决方案。类似于其他需要在当前页面使用,离开需要销毁的组件(例如一些第三方库的picker组件等等),都可以使用此方式来解决离开后以后在背后运行的问题。
综合来说,我们更推荐使用方案2,使得代码可读性更强,一目了然。如果不清楚once、on、$off的使用,这里送上官网的地址教程,在程序化的事件侦听器那里: https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%A8%8B%E5%BA%8F%E5%8C%96%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BE%A6%E5%90%AC%E5%99%A8

打包后生成很大的.map文件的问题

项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 而生成的.map后缀的文件,就可以像未加密的代码一样,准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的,所以可以在打包时不生成这些文件:
在config/index.js文件中,设置productionSourceMap: false,就可以不生成.map文件


image.png

点击事件延时 fastClick的300ms延迟解决方案

开发移动端项目,点击事件会有300ms延迟的问题。至于为什么会有这个问题,请自行百度即可。这里只说下常见的解决思路,不管vue项目还是jq项目,都可以使用fastClick解决。
安装 fastClick:

cnpm install fastclick -S

在main.js中引入fastClick和初始化:

import FastClick from 'fastclick'; // 引入插件
FastClick.attach(document.body); // 使用 fastclick

相关文章

  • 【转载】vue3 template模版字符串写法报错: Comp

    【vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.e...

  • vue 图片 显示方案

    相信有些刚入手vue的小白来说 vue 中有许多的问题 我也是刚入手vue 就简单记一记 vue图片展示的问题 v...

  • vue : 无法加载文件 XXX\AppData\Roaming

    一、问题:使用命令行安装完成vue/cli后,使用vue ui/vue create XXX无法创建项目 vue ...

  • vue问题

    vue-router路由跳转有两种模式需要在mode属性填写用的模式,vue有两种模式history模式和hash...

  • vue问题

    1.在vue和webpack一同使用时,当在index.js的头部像这样import Vue from 'vue'...

  • vue问题

    一.vue打包成功后访问不到路径 未找到下图路径 方法改为如下打包成功 二.vue报各种规范问题,可以先直接关掉规范检测

  • vue 问题

    watch检测 mint -tab-container 会导致tab-container swiper 死循环

  • vue问题

    1.定时器 使用定时器 最后在beforeDestroy()生命周期内清除定时器: 方案1有两点不好的地方,引用尤...

  • vue 奇怪的Bug

    标题虽然这样起,但是大部分都不是vue的问题,是代码问题 [Vue warn]: $listeners and $...

  • vue-router内嵌iframe页面,回退异常

    问题描述:在vue页面内嵌了iframe,通过$router.back()回退异常 问题分析: 使用vue-rou...

网友评论

      本文标题:vue问题

      本文链接:https://www.haomeiwen.com/subject/yhyznktx.html