beforeRouteEnter


  • 方法名称: beforeRouteEnter
  • 调用时机: 切换路由之前,调用该方法时,页面还没有切换
  • next调用时机: activated 之后
  • 注意事项: this == undefined

beforeRouteEnter(to, from, next) {
  // alert('beforeRouteEnter')
  next(vm =>{
    // alert('beforeRouteEnter-next')
  })
},

beforeCreate


  • 方法名称: beforeCreate
  • 调用时机: 数据观测, 初始化vue内部事件之前, beforeRouteEnter 调用之后
  • 注意事项:

1: this !== undefined
2: this.$data == undefined
3: methods 里面的方法 == undefined
4: 如果有<keep-alive>缓存,该方法不会被调用

beforeCreate() {
  // alert('beforeCreate')
},

created


  • 方法名称: created
  • 调用时机: 数据观测, 初始化vue内部事件之后 ,beforeCreate 之后
  • 注意事项:

1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$data 可以访问
3: methods 里面的方法可以访问

created() {
  // alert('created')
},

beforeMount


  • 方法名称: beforeMount
  • 调用时机: 在挂载开始之前被调用:相关的 render 函数首次被调用 ; created 之后
  • 注意事项:

1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 不能访问

beforeMount() {
  // alert('beforeMount')
},

mounted


  • 方法名称: mounted
  • 调用时机: el 被新创建的 vm.$el 替换,并挂载到实例上去之后 ; beforeMount 之后
  • 注意事项:

1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 能访问

mounted() {
  // alert('mounted')
},

activated


  • 方法名称: activated
  • 调用时机: keep-alive 组件激活时调用 ; mounted 之后
  • 注意事项:

1: 如果有<keep-alive>缓存,该会被调用
2: this.$el 能访问

activated() {
  // alert('activated')
},

deactivated


  • 方法名称: deactivated
  • 调用时机: keep-alive 组件停用时调用 (跳出页面调用)

deactivated() {
  // alert('deactivated')
},

beforeDestroy


  • 方法名称: beforeDestroy
  • 调用时机: 销毁页面之前 , 实例仍然完全可用
  • 注意事项: $destroy()完全销毁一个实例

beforeDestroy() {
  // alert('beforeDestroy')
},

destroyed


  • 方法名称: destroyed
  • 调用时机: 销毁页面之后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
  • 注意事项: $destroy()完全销毁一个实例

destroyed() {
  // alert('destroyed')
},

beforeUpdate


  • 方法名称: beforeUpdate
  • 调用时机: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
  • 注意事项: 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程

beforeUpdate() {
  // alert('beforeUpdate')
},

updated

  • 方法名称: updated
  • 调用时机: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁 之后调用
  • 注意事项: 组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环

updated() {
  // alert('updated')
},

vue 钩子函数的更多相关文章

  1. vue 钩子函数 使用async await

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  3. Vue钩子函数

    Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...

  4. vue 钩子函数的使用

    1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...

  5. vue 钩子函数的初接触

    vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...

  6. vue钩子函数的妙用之“created()和activated()”

    一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...

  7. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  8. VUE钩子函数created与mounted区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.

  9. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. Spark大数据处理 之 RDD粗粒度转换的威力

    在从WordCount看Spark大数据处理的核心机制(2)中我们看到Spark为了支持迭代和交互式数据挖掘,而明确提出了内存中可重用的数据集RDD.RDD的只读特性,再加上粗粒度转换操作形成的Lin ...

  2. linux模式切换,进程切换

    内核态和用户态的切换: 用户态到内核态的转换:1.进行系统调用,2.异步中断,3.外部硬件中断 检查特权级别的变化:当异常发生在用户态,而异常处理函数则必须运行在内核态,则此时必须调用内核态的堆栈(系 ...

  3. linux文件系统相关概念

    struct task_struct { ......................... struct mm_struct*mm;//内存描述符的指针 struct files_struct *f ...

  4. Nginx多域名负载均衡配置

    Nginx负载均衡设置 环境: 负载均衡:192.168.188.128:80 Web1:192.168.188.128:81 Web2:192.168.188.129:80 正式环境中,需要解析域名 ...

  5. 10.Web组件复用

    1.静态包含(一个指令) 在软件工程中构建可复用组件可极大的提高软件生产效率.增强系统的可维护性HTML标记对于一个web应用系统中的页面都是通用的,比如公司标志.版权声明.导航菜单JSP中引用的we ...

  6. 工作中常用的linux命令(持续更新)

    一.top 实时动态地查看系统的整体运行情况1.在top命令后 > < 切换排序方式,根据cpu排名或者内存排名查看 2.top -p 进程pid 查看某一进程的整体运行情况 二.解压缩 ...

  7. 搭建hadpoot平台(集群式分布)

    1.先下载VMware1.2,然后安装. 2.下载ubuntu-1.4.05-desktop-amd64.iso.下载地址:http://mirrors.aliyun.com/ubuntu-relea ...

  8. Serializable深入理解

    1.什么是序列化,解决什么问题 序列化可以对象的状态信息转换成可以持久化或者可以传输形式的过程.一般是转为字节数据.而把字节数组还原成原来同等对象的过程成为反序列化. 在Java中,对象的序列化与反序 ...

  9. MQTT学习之一

    一MQTT特性: 基于C/S,发布订阅(发布者服务器->云平台代理->订阅客户端)一对多结构,适用于低带宽高延时,基于TCP/IP之上.

  10. leetcode 175 Combine Two Tables join用法

    https://leetcode.com/problemset/database/ ACM退役,刚好要学sql,一定要刷题才行,leetcode吧. 这一题,说了两个表,一个左一个右吧,左边的pers ...