每个 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. shell里连接数据库,将结果输出到变量

    result=$(sqlplus -s 'ccc/ccc@21.96.34.34:1521'<<EOF ..... EOF )

  2. 保存配置,获取配置,XML

    private void SaveSOConfig() { //保存配置 Dictionary<string, string> PrintConfigDIC = new Dictionar ...

  3. Gitlab定义安全变量遇到无法转义的字符——感叹号

    我在安全变量(Secret variables)中定义了一个变量,变量值中含有特殊字符感叹号 ! . 然后我在批处理中,引用了该变量,惊奇地发现,变量值中的 ! 丢失了. 我以为是Windows CM ...

  4. kubernetes 开发 code-generator

    主要参考项目 https://github.com/kubernetes/code-generator 1. git clone https://github.com/kubernetes/code- ...

  5. python 科学计算及数据可视化

    第一步:利用python,画散点图. 第二步:需要用到的库有numpy,matplotlib的子库matplotlib.pyplot numpy(Numerical Python extensions ...

  6. Arrays工具类

    1.Arrays工具类针对数组进行操作的工具类 提供了排序查找等功能 2.方法: Arrays.toString(int[] a) 将数据转换成字符串 Arrays.sort(int[] a) 将数组 ...

  7. 安卓使用TextView实现图片加文字说明

    背景:通讯录列表,每个单元格显示头像+名字,且头像显示圆形 方案一:ImageView + TextView 方案二:只用TextView + drawableLeft 属性 <TextView ...

  8. 【题解】Luogu P2347 砝码称重

    正经·DP题解 一道非常好的背包练手题( sto(注:原思路来源 SLYZ_0120 的题解)orz 开始这道题 1.输入六个数,存进数组中 2.初始化 f 数组为0. f [ i ] 表示重量为 i ...

  9. kafka学习-坑篇

    安装(滤过) 启动(滤过) 坑(开始)--- topic creat完成后准备使用console-produce发布一个topic,错误如下: [-- ::,] WARN [Producer clie ...

  10. Mac appStore下载软件报500错误的解决方法

    Step1.打开"启动台": Step2:打开"其他": Step3:打开"终端": Step4:复制如下代码,主要不要作任何更改,不要有多 ...