所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。

beforeCreate

  在实例初始化之后,此时还不能访问到data。

created

  created钩子函数中已经可以访问data,ajax请求最好放到这个钩子函数中,请求返回的数据可以直接放在data中。

beforeMount

  在挂载开始之前被调用:相关的 render 函数首次被调用。

  该钩子在服务器端渲染期间不被调用。

mounted

  可以访问到dom,对dom进行操作

beforeUpdate

  数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加 的事件监听器。

  该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

updated

  数据更改导致的虚拟 DOM 重新渲染,在这之后会调用该钩子。

  注意:updated不会承诺所有的子组件也都一起被重绘。如果希望等到整个视图都重绘完毕,可以用vm.$nextTick替换掉updated

  该钩子在服务器端渲染期间不被调用。

beforeDestory

  实例销毁之前调用。在这一步,实例仍然完全可用。

  该钩子在服务器端渲染期间不被调用。

destoryed

  Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实 例也会被销毁。

  该钩子在服务器端渲染期间不被调用。

nextTick

  将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

VueAPI 2 (生命周期钩子函数)的更多相关文章

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

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

  2. 关于 vue 生命周期 钩子函数 事件

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

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

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

  4. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  5. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  6. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  7. 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink

     壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...

  8. 什么是vue生命周期和生命周期钩子函数?

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  9. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

随机推荐

  1. Spring 之 BeanFactory 源码 - 接口分析

    一.BeanFactory的基本类体系结构(接口为主):

  2. Part 20 Create custom service in AngularJS

    Whenever the case changes from lower to upper, a single space character should be inserted. This mea ...

  3. 第四周PTA笔记 好吃的巧克力+特殊的翻译+下次一定(续)+走迷宫

    好吃的巧克力 超市正在特价售卖巧克力,正好被贪吃的Lucky_dog看见了. 巧克力从左到右排成一排,一共有N个,M种. 超市有一个很奇怪的规定,就是你在购买巧克力时必须提供两个数字a和b,代表你要购 ...

  4. 大爽Python入门教程 0-3 安装Atom与配置Python环境

    大爽Python入门公开课教案 点击查看教程总目录 安装轻量级IDE--Atom 一 下载 下面步骤1,2中网络卡顿的朋友, 请直接查看步骤3来操作 1. 搜索官网 使用搜索引擎搜索Atom, 打开搜 ...

  5. python3 在webelement对象里面获取元素路径的方法

    一. 在webelement对象里面使用查找Xpath 查找时,必须使用.指明当前节点 food = driver.find_element_by_id('food') eles = food.fin ...

  6. 菜鸡的Java笔记 第二十五 wrapperClass 包装类

    wrapperClass 包装类         1.包装类的特点        2.装箱与拆箱操作        3.数据转型处理            内容        Object 类可以接收 ...

  7. React-native键盘遮挡输入框问题的解决

    2016年10月25日更新: 现在有一个更准确一点的做法是用一个View包裹住TextInput,然后通过该View的onLayout方法获取该输入框的y轴位置,再减去一个适当的高度去处理scroll ...

  8. iNeuOS工业互联网操作系统,分布式云端控制安全策略和增加实时日志功能

    目       录 1.      概述... 2 2.      平台演示... 2 3.      云端控制策略和应用过程... 2 3.1           云端控制策略... 2 3.2   ...

  9. [NOIP2017 提高组] 列队

    考虑我们需要维护的是这样一个东西. 即可能变化的只有每一行前\(m - 1\)个,和最后一列. 我们考虑对每一行开一个权值线段树,记录原本序列的第\(x\)个是否被一出,且用一个\(vector\)记 ...

  10. 洛谷 P4426 - [HNOI/AHOI2018]毒瘤(虚树+dp)

    题面传送门 神仙虚树题. 首先考虑最 trival 的情况:\(m=n-1\),也就是一棵树的情况.这个我相信刚学树形 \(dp\) 的都能够秒掉罢(确信).直接设 \(dp_{i,0/1}\) 在表 ...