一、纯客户端中

对于全局的代码,比如定时器等,在 beforeDestroy或 destroyed 生命周期时将其销毁。如果在跳转路由时候,组件销毁了,全局的定时器却没有销毁,这会使得页面产生卡顿。

beforeDestroy(){
clearInterval(this.intervalId);
} 

 

二、服务端渲染过程中

  所有的生命周期钩子函数中,只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码(例如 beforeMount 或 mounted),只会在客户端执行。

  由于在 SSR 期间并不会调用销毁钩子函数,所以 timer 将永远保留下来。为了避免这种情况,请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

在vue生命周期中及时销毁全局作用的代码的更多相关文章

  1. VUE生命周期中的钩子函数及父子组件的执行顺序

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  2. 关于vue生命周期中的同步异步的理解

    在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...

  3. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  4. Vue生命周期,面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  5. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

  6. Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  7. Vue生命周期钩子---3

    vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...

  8. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  9. Vuex 注入 Vue 生命周期的过程

    首先我们结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很 ...

随机推荐

  1. Nginx原理和配置总结

    一:前言 Nginx是一款优秀的HTTP服务器和反向代理服务器,除却网上说的效率高之类的优点,个人的切身体会是Nginx配置确实简单而且还好理解,和redis差不多,比rabbitmq好理解太多了: ...

  2. Linux CentOS7.0 (04)systemctl vs chkconfig、service

    CentOS 7.0中已经没有service命令,而是启用了systemctl服务器命令 systemctl 是系统服务管理器命令,它实际上将 service 和 chkconfig 这两个命令组合到 ...

  3. Spring知识点回顾(05)bean的初始化和销毁

    Java配置方式:@Bean @InitMethod @destroyMethod xml配置方式:init-method,destroy-method 注解方式:@PostConstruct,@Pr ...

  4. BBS的登陆——发帖——回帖

    整体分析思路 1.首先手工熟悉一遍业务流程 2.录制脚本,选取协议,设置录制选项 1)Run-Time-Settings——Preferences——Options设置3个超时 2)Recording ...

  5. MYSQL之视图、触发器、存储过程、函数、事物、数据库锁和数据库备份

    一.视图 -- view 视图:是一个虚报表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据. 视图有如下特点: 1.视图的列可以来自不同的表,是表的抽象和逻辑意义上建立的新关系 ...

  6. RxJava系列4(过滤操作符)

    RxJava系列1(简介) RxJava系列2(基本概念及使用介绍) RxJava系列3(转换操作符) RxJava系列4(过滤操作符) RxJava系列5(组合操作符) RxJava系列6(从微观角 ...

  7. ubuntu16.04下安装chrome

    1.在终端中,输入以下命令: sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.l ...

  8. Python面向对象进阶示例--自定义数据类型

    需求: 基于授权定制自己的列表类型,要求定制的自己的__init__方法, 定制自己的append:只能向列表加入字符串类型的值 定制显示列表中间那个值的属性(提示:property) 其余方法都使用 ...

  9. 基于 MySQL 的数据库实践(基本查询)

    首先根据准备工作中的操作导入大学模式,打开数据库连接后进入到 MySQL 的交互界面,再使用命令 use db-book; 切换到 db-book 数据库. 单关系查询 SQL 查询的基本结构由三个子 ...

  10. 字段从varchar2修改为number,字段中的内容做修改,替换

    #测试表的内容结构:如下所示: 其中DATEHH字段:代表时间,字段在表中是varchar2格式 现有如下需求:字段类型,从varchar2改变为number, 字段中 '.'去除, 2013103少 ...