详解vue生命周期及每个阶段适合进行的操作
VUE生命周期的四个阶段
- create 创建 -------- 创建vue实例并初始化
- mount 挂载 -------- 把vue实例和视图进行关联
- update 更新 ------- 监听数据与视图的变化
- destroy销毁 ------- 销毁实例
生命周期 --- 钩子函数
vue为上面的4个大的阶段提供了一个可编程的接口,我们可以在这4个的某个时段写入一些自己的逻辑,vue是通过配置一个叫做生命周期钩子函数的选项来实现的
beforecreate
- 在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前调用,里面的this指向实例
create
- 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置;数据观测(data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,还未与页面关联起来,$el属性目前不可见。可在这阶段进行一些初始化的操作(如ajax获取数据之类的)
beforemount
- 在挂载之前没调用,解析模板,把实例对象下的$el属性指向设置中的el参数指定的元素,这个解析后的模板还没有和$el进行绑定
mounted
- 挂载之后调用,把解析后的模板与页面元素进行绑定,用解析后的模板内容替换页面
beforeupdate
- 在数据绑定之前被调用
update
- 在数据改变之后被调用,可以进行依赖于dom的操作(可以在这个阶段进行dom操作)
详解vue生命周期及每个阶段适合进行的操作的更多相关文章
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- 【Vue】详解Vue生命周期
Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...
- 详解Vue生命周期---1
目录 Vue实例的生命周期全过程(图) 在beforeCreate和created钩子函数间的生命周期 created钩子函数和beforeMount间的生命周期 el选项的有无对生命周期过程的影响 ...
- 实例化vue发生了什么(详解vue生命周期)
const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- maven详解之生命周期与插件
Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- python小白入门之导入指定的模块
在python中导入模块是通过关键字import进行导入的,下面演示一下,模块的导入,指定模块别名,指定函数别名,调用模块中所有的函数运行结果: 1.模块的导入Study.py文件里面的内容是:形式 ...
- 开发机直连 Docker 中的 Redis 容器小教程
在笔者日常开发中,都是把redis装在windows系统中.虽然可以通过RedisDesktopManager等客户端工具连接操作redis,但是还是觉得low了一些.因为作为程序员,我可能更想在Li ...
- redis实现排行榜思路
用redis的排序集合类型 sortset()实现排行榜 zadd();添加 ZREVRANGE();查看
- 2019-2020-1 20199326《Linux内核原理与分析》第六周作业
本周学习了庖丁解牛Linux内核分析第五章:系统调用的三层机制(下),是上一章的延续 实验内容:使用gdb跟踪分析一个系统调用内核函数 上周实验我选择的getpid这个系统系统调用,这次准备使用gdb ...
- kubernetes1.30集群部署+dashboard+heapster
v2.1 1.系统配置 1.1.禁用防火墙.禁用selinux #防火墙禁用 systemctl stop firewalld systemctl disable firewalld #SELinux ...
- Spring Boot的exit code
文章目录 Spring Boot的exit code 自定义Exit Codes ExitCodeGenerator ExitCodeExceptionMapper ExitCodeEvent Spr ...
- if __name__ == '__main__'到底是什么?
引子 要搞清楚这个问题,可以先听一个故事~~~ 像我们做事一样,都需要一个起始点,终点存在与否无关紧要.编程也是一样,任何程序都有一个入口,在所谓的静态编译语言中,如Java的入口是一个名字叫做Mai ...
- Mozilla开始推送Firefox Preview 5.0版 支持画中画特性
Mozilla 发布了 5.0 版本的 Firefox Preview 浏览器,根据 GitHub 上的发布说明,这次更新带来了一系列新的改进.其中包含对五个新的附加组件的支持,引入了对 Progre ...
- 重识TCP/IP协议族与HTTP基础
不忘初心 砥砺前行, Tomorrow Is Another Day ! 本文概要: TCP/IP协议族的网络分层 TCP三次握手四次挥手 Http简介 报文结构 Http的请求方法及状态码 常用的H ...
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...