详解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 ...
随机推荐
- htaccess 一般配置
一.Apache服务器 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine on Rewr ...
- C#多线程(16):手把手教你撸一个工作流
目录 前言 节点 Then Parallel Schedule Delay 试用一下 顺序节点 并行任务 编写工作流 接口构建器 工作流构建器 依赖注入 实现工作流解析 前言 前面学习了很多多线程和任 ...
- 串口字符串-HEX格式
串口字符串-HEX格式 C++SerialSerialPortHEX 介绍 串口通信过程中 通常涉及一个数据的模拟过程以及数据发送过程, 一般来说, 我们会发送一串指令给下位机 68 05 00 84 ...
- java关于throw Exception的一个小秘密
目录 简介 throw小诀窍 总结 java关于throw Exception的一个小秘密 简介 之前的文章我们讲到,在stream中处理异常,需要将checked exception转换为unche ...
- Pycharm中设置encoding
在Pycharm专业版中,为了防止文件在别的机器上出现乱码,所以需要进行字符编码的设置. 首先在Pycharm中的View中将下图中的Toolbar打上勾. 接着,工具栏就会出现,选中settings ...
- JavaScript面向对象的作用域链(转载)
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- cobbler的网页操作
需求:安装一台服务器 1.指定两块网卡一块外网一块内网2.内网ip10.0.0.62外网为172.16.1.623.主机名为m02 开始吧! 1.添加镜像文件 2.创建ks文件 编写ks文件 附:ks ...
- Ubuntu 14.04 配置samba
Ubuntu 14.04 配置samba: 安装略 # vi /etc/samba/smb.conf security = user (在[global]下任意添加) [share] path = ...
- Codeforces Round #509 (Div. 2) A. Heist 贪心
There was an electronic store heist last night. All keyboards which were in the store yesterday were ...
- 25-Java-Spring框架(三)
Spring框架的了解.SpringIOC的部分内容请阅读23-Java-Spring框架(一) SpringwebMVC的了解.请求流程.运用等请阅读24-Java-Spring框架(二) 四.Sp ...