VUE学习-生命周期
生命周期
函数 | 描述 |
---|---|
beforeCreate | 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |
created | 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。 |
beforeMount | 1. 在挂载开始之前被调用:相关的 render 函数首次被调用。 2. 该钩子在服务器端渲染期间不被调用。 |
mounted | 1. 实例被挂载后调用,这时 el 被新创建的 vm.\(el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.\)el 也在文档内。 2. 该钩子在服务器端渲染期间不被调用。 |
beforeUpdate | 1. 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。 2. 该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。 |
updated | 1. 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。 2. 该钩子在服务器端渲染期间不被调用。 |
activated | 1. 被 keep-alive 缓存的组件激活时调用。 2. 该钩子在服务器端渲染期间不被调用。 |
deactivated | 1. 被 keep-alive 缓存的组件停用时调用。 2. 该钩子在服务器端渲染期间不被调用。 |
beforeDestroy | 1. 实例销毁之前调用。在这一步,实例仍然完全可用。 2. 该钩子在服务器端渲染期间不被调用。 |
destroyed | 1. 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。 2. 该钩子在服务器端渲染期间不被调用。 |
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用
vm.$nextTick
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用vm.$nextTick
注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用
vm.$nextTick
var nextTickFunt = function () {
// Code that will run only after the
// entire view has been rendered
}
mounted: function () {
this.$nextTick(nextTickFunt)
}
updated: function () {
this.$nextTick(nextTickFunt)
}
生命周期函数
实例生命周期钩子
new Vue({
data: { a: 1 },
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
}) // => "a is: 1"
不要在选项 property 或回调上使用箭头函数,比如
created: () => console.log(this.a)
或vm.$watch('a', newValue => this.myMethod())
。
因为箭头函数并没有 this
,this
会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之类的错误。
生命周期图示
VUE学习-生命周期的更多相关文章
- vue学习生命周期(created和mounted区别)
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 深入理解Vue的生命周期
谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...
- Vue的生命周期(在其他地方看到一份非常好又详细的详解)
链接地址:https://segmentfault.com/a/1190000011381906 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图 ...
- 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
随机推荐
- Unity Vuforia 动态替换识别图
1.在Unity里 Vuforia 用来做识别信息的是 StreamingAssets 下 Vuforia文件夹内的 Dat和XML 文件. 2.想要替换识别图需要在Vuforia官网里替换识别图 ( ...
- JavaSE——subString()方法
package com.zhao.stringtest;public class Test4 { //手机号屏蔽中间四位 //subString(int beginIndex,int endIndex ...
- 容器之docker基础
一 docker的介绍 Docker是一个开源的应用容器引擎,使用Go语言开发,基于Linux内核的cgroup, namespace, Union FS等技术,对应用进程进行封装隔离,并且独立于宿主 ...
- HTTP头注入:XFF注入
0x00:XFF是什么? X-Forwarded-For:简称XFF头,它代表客户端,也就是HTTP的请求端真实的IP,(通常一些网站的防注入功能会记录请求端真实IP地址并写入数据库or某文件[通过修 ...
- pandas-数据结构转换-纵转横
如下代码,亲测有效,后面会附上入口以及出口数据结构截图 def test_func(file_path): """ 把pandas数据结构-dataframe,横向的索引 ...
- [746] Interlude Update 3
[746] Interlude Update 3 Client 00 SendProtocolVersion 01 MoveBackwardToLocation 02 Say 03 RequestEn ...
- CentOS7桥接网络设置(小白向)
配置过程 查看网卡设备名:输入ifconfig 可以看到网卡设备名是ens32 注:不同版本网卡设备名是不一样的 进入到默认文件路径,输入:cd /etc/sysconfig/network-scri ...
- application.yaml
spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver username: root password: root url: j ...
- day1 AcWing 836. 合并集合
初始化: n个下表对应n个集合,根节点的特征是父节点就是其本身. for(int i = 1; i <= n; i++) p[i] = i; M操作:如果两个元素在同一个集合中,什么也不做,否则 ...
- docker中搭建Ubuntu:16.04+python3.6+django环境
用vim 新建一个Dockerfile和sources.list文件,在里面添加如下内容. #sources.list deb http://mirrors.163.com/ubuntu/ xenia ...