vue的生命钩子函数在使用Vue开发中是非常重要的一环,可以说,生命钩子函数使开发变得更加便捷。

下图是Vue的生命周期图:

具体钩子如下:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

beforeCreate: 正常不太会用到,处于Vue的第一个生命钩子,除非有一些特殊业务

created:在一个项目中,会常用于初始向服务端请求数据,并进行vue中的数据的赋值。

注意:不要在created中挂载任何和DOM有关系的内容,因为此时DOM还没有被渲染出来,会导致失败。

beforeMount:也是一个不常用到的钩子,位于vue替换el前,vue会根据实例中是否有模板去替换掉挂载的DOM。所有在此之前的DOM是否被替换。

mounted:常用于在dom渲染完毕,进行页面的各种处理。

beforeUpdate:是一个特殊的钩子,监听实例内数据发生变化时候触发。这里要注意不要在该钩子函数里做任何有关数据变化的操作,否则会进入死循环。

updated:数据更新完毕后重新渲染虚拟DOM,可用于处理重新渲染的DOM的操作。

activated:又是一个特殊的钩子,需要在模块中增加keep-alive标签包含内容才会有该钩子。keep-alive缓存不活动的组件实例,避免销毁重复渲染。所以此时的组件渲染完毕后,可以理解为激活未激活状态。activated进入激活状态时候的钩子。

 1 // 这是一个单文件组件。 code.Vue
2
3 <template>
4 <keep-alive>
5 <div class="s-canvas">
6 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight">
7 </canvas>
8 </div>
9 </keep-alive>
10 </template>

deactivated:与上面相反。在组件失活时候调用,假如你在activated中做了绑定的操作,最好在这进行解绑,以免每次进入激活状态重复绑定,导致内存占用。

beforeDestroy:处于Vue实例销毁前的钩子。该钩子执行后,Vue会解除绑定,以及销毁所有的监听事件和字组件。

destroyed:整个实例销毁完毕后执行。

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

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

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

  2. vue小白必看的生命钩子函数图解

    还有3个钩子并未出现在图上: 1.activated生命周期钩子函数在keep-alive 组件激活时调用,该钩子在服务器端渲染期间不被调用. 2.deactivated生命周期钩子函数在keep-a ...

  3. vue的钩子函数

    1.computed 计算属性 计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 1..aPlus: { get: function ...

  4. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  5. vue 生命钩子周期之理解

    对于vue的初学者来说,理解vue的生命钩子周期是很有必要的.什么是生命钩子周期呢,顾名思义就是 “实例初始化”  到  “实例被销毁” 的过程. 理解vue的生命钩子周期,我们就可以更好的在项目中运 ...

  6. vue中钩子函数的用法

    这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初 ...

  7. 生命周期(vue的钩子函数)

    生命周期图示 创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...

  8. 【vue】钩子函数生命周期

    图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html    https://segmentfault.com ...

  9. 关于vue中钩子函数非常好的博客

    http://www.cnblogs.com/caimuqing/p/6728568.html

随机推荐

  1. python-数据清洗与编码解码

    0x01 join str = 'hk$$yicunyiye$$hello world' print(str.split('$$')) #自己实现 result = '' for i in str.s ...

  2. Jmeter(二十四) - 从入门到精通 - JMeter函数 - 中篇(详解教程)

    1.简介 在性能测试中为了真实模拟用户请求,往往我们需要让提交的表单内容每次都发生变化,这个过程叫做参数化.JMeter配置元件与前置处理器都能帮助我们进行参数化,但是都有局限性,为了帮助我们能够更好 ...

  3. 请求转发和重定向实现与Ajax实现表单登陆

    private void login(HttpServletRequest request, HttpServletResponse response) throws ServletException ...

  4. 神经网络全连接层+softmax:

    如下图:(图片来自StackExchange) 强化说明全连接层: 1.通常将网络最后一个全连接层的输入,即上面的x \mathrm{x}x,视为网络从输入数据提取到的特征. 2. 强化说明softm ...

  5. spring aop 源码分析(三) @Scope注解创建代理对象

    一.源码环境的搭建: @Component @Scope(scopeName = ConfigurableBeanFactory.SCOPE_SINGLETON,proxyMode = ScopedP ...

  6. IIS网站建立好后如何更改绑定IP或端口号

    写在前面的话 我们利用IIS建立网站的时候,一般都是设定好网站名称和物理地址,直接下一步建立完成了.正常访问都没问题,但如果我们这时候想要更改访问的IP或者端口号,打开了很多设置项就是没找到设置的地方 ...

  7. Centos-对比文件差异-diff

    diff 比较文件差异 相关选项 -c 显示全部内容,并标记不同之处 -b 忽略行尾空格,并认为字符串中一个或多个空格视为相同 -r  当比较双方都是目录时,会比较子目录中的文件 -s 当两个文件相同 ...

  8. osgEarth使用笔记1——显示一个数字地球

    目录 1. 概述 2. 实现 2.1. 三维显示 2.2. 二维显示 1. 概述 osgEarth支持.earth格式的文件,里面保存了数字地球相关信息的配置XML,只需要读取这个配置文件,就可以直接 ...

  9. SQL实战——02. 查找入职员工时间排名倒数第三的员工所有信息

    查找入职员工时间排名倒数第三的员工所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL, ...

  10. Linux系统编程 —共享内存之mmap

    共享内存概念 共享内存是通信效率最高的IPC方式,因为进程可以直接读写内存,而无需进行数据的拷备.但是它没有自带同步机制,需要配合信号量等方式来进行同步. 共享内存被创建以后,同一块物理内存被映射到了 ...