VueAPI 2 (生命周期钩子函数)
所有的生命周期钩子自动绑定 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 (生命周期钩子函数)的更多相关文章
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- 了解angularjs中的生命周期钩子函数$onInit,$onChange,$onDestory,$postLink
壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive,组件component,并专门花了一篇文章介绍directive与component的不同,其中提到在compon ...
- 什么是vue生命周期和生命周期钩子函数?
原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
随机推荐
- 寒武纪加速平台(MLU200系列) 摸鱼指南(二)--- 模型移植-环境搭建
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- Ubuntu更换python版本
Ubuntu更换python版本 ubuntu服务器自带的python版本是python3.6,在运行jwt包时会有版本问题,所以安装和本地相同的python版本=>python3.7 安装py ...
- Django 小实例S1 简易学生选课管理系统 2 新建项目(project)并进行设置
Django 小实例S1 简易学生选课管理系统 第2节--新建项目(project)并进行设置 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 0 ...
- pytest-mian函数运行
1.设置多并发运行 1.命令行安装 pip install pytest-xdist #安装插件,进行多并发运行,#调用:-n -5 import pytest # pytest.main([&quo ...
- [hdu6134]Battlestation Operational
1 #include<bits/stdc++.h> 2 using namespace std; 3 #define mod 1000000007 4 #define N 1000005 ...
- [hdu6578]Blank
状态f[i][j][k][l]表示前i个数,四种数的最后一次出现的位置分别是i.j.k和l(i>j>k>l),判断所有第右端点为i的区间是否满足此要求(不满足重置为0),考虑第i+1 ...
- [bzoj1082]栅栏
先二分答案,然后搜索暴力判断由于数据范围较大,需要剪枝:1.当前所有可能被用到的木板长度和(长度要不小于最小所需长度)>=所要拼成的所有木板的和:2.对于需求从大到小枚举木板(这样一开始枚举次数 ...
- CF1463F Max Correct Set
考虑证明一个答案必定为\((x + y)\)的循环节递归. 考虑到如果第二块比第一块答案大,则必定可以把第一块换为第二块增加答案. 且可以证明,如果\((x + y)\)是合法的,则整个序列合法. 那 ...
- 三个 AGC D(AGC037D、AGC043D、AGC050D)
大概就 lxr 讲了 4 个 AGC 的 D,有一个以前做过了不算,另外三个都会做罢( 为了避免开三个博客就把它们合并到一起了 AGC 037 D lxr:难度顺序排列大概是 037<043&l ...
- Codeforces Round #683 (Div. 1) Solution
A. Knapsack 猜个结论--先把所有的东西加起来,如果小于 \(\frac{1}{2}m\) 就输出不合法:如果在 \([\frac{1}{2}m, m]\)之间直接全部输出:若大于 \(m\ ...