每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({
// 选项
}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

Vue提供的可以注册的钩子都在上图片的红色框标注。 他们分别是:

  1. beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  2. created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
  5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
												

vue-实例生命周期钩子(不太明白)的更多相关文章

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

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

  2. 前端(二十)—— vue介绍:引用vue、vue实例、实例生命周期钩子

    vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...

  3. Vue实例生命周期+vueRoter

    Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...

  4. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  5. Vue_(组件)实例生命周期钩子

    Vue生命周期中文文档 传送门 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这 ...

  6. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  7. vue之生命周期钩子函数之运用

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

  8. vue实例生命周期详解

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...

  9. 【Vue实例生命周期】

    目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpda ...

随机推荐

  1. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165316

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165316 下载 我分别下载了kali-linux-2019.1-i386的镜像文件和kali-linux ...

  2. tomcat1(servlet,http,socket)

    1.servlet容器是如何工作的? a.创建一个request对象,用可能会在调用的Servlet中使用到的信息填充该request对象(参数,头,cookies,查询字符串,URI等).reque ...

  3. 三分钟了解Go语言的前世今生

    一. 为什么需要一个新的语言最近十年来,C/C++在计算领域没有很好得到发展,并没有新的系统编程语言出现.对开发程度和系统效率在很多情况下不能兼得.要么执行效率高,但低效的开发和编译,如C++:要么执 ...

  4. L1,L2正则化代码

    # L1正则 import numpy as np from sklearn.linear_model import Lasso from sklearn.linear_model import SG ...

  5. webpack4 系列教程(十六):开发模式和生产模式·实战

    好文章 https://www.jianshu.com/p/f2d30d02b719

  6. VS2110。VC++编译错误"error LNK2005: 已经在 XXX.obj 中定义的问题"

    有时候我们会在头文件当中定义一些全局变量或者全局函数,这种做法会比较方便,但有时候会出现“编译错误"error LNK2005: 已经在 XXX.obj 中定义的问题"的链接问题. ...

  7. C# 启动外部进程

    C# 启动外部进程: var processInfo = new ProcessStartInfo(fullName); processInfo.UseShellExecute = false; pr ...

  8. Java — CommonUtil

    一些Java的公用方法: 1:获取当前时间 2:判断当前时间是否在时间date2之前3:比较时间大小4:获取某个时间的前n个小时5:返回某个字符串时间的Calendar对象6:判断两个时间段是否有重叠 ...

  9. 在多机器上远程执行JMeter

    安装完jmeter之后直接执行%InstallDir%\apache-jmeter-3.2\bin\JMeter.bat可以启动UI界面,可以编辑或者执行TestPlan等,默认情况下,用例是在本机执 ...

  10. L1范数与L2范数​

    L1范数与L2范数​ ​ L1范数与L2范数在机器学习中,是常用的两个正则项,都可以防止过拟合的现象.L1范数的正则项优化参数具有稀疏特性,可用于特征选择:L2范数正则项优化的参数较小,具有较好的抗干 ...