vue2.0 之 生命周期
一、vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络)
二、vue2.x生命周期图和各阶段具体含义
beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载
示例:
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <p>{{ message }}</p>
- </div>
- <script type="text/javascript">
- var app = new Vue({
- el: '#app',
- data: {
- message : "xuxiao is boy"
- },
- beforeCreate: function () {
- console.group('beforeCreate 创建前状态===============》');
- console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
- console.log("%c%s", "color:red","data : " + this.$data); //undefined
- console.log("%c%s", "color:red","message: " + this.message)
- },
- created: function () {
- console.group('created 创建完毕状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el); //undefined
- console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
- console.log("%c%s", "color:red","message: " + this.message); //已被初始化
- },
- beforeMount: function () {
- console.group('beforeMount 挂载前状态===============》');
- console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
- console.log("%c%s", "color:red","message: " + this.message); //已被初始化
- },
- mounted: function () {
- console.group('mounted 挂载结束状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
- console.log("%c%s", "color:red","message: " + this.message); //已被初始化
- },
- beforeUpdate: function () {
- console.group('beforeUpdate 更新前状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el);
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data);
- console.log("%c%s", "color:red","message: " + this.message);
- },
- updated: function () {
- console.group('updated 更新完成状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el);
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data);
- console.log("%c%s", "color:red","message: " + this.message);
- },
- beforeDestroy: function () {
- console.group('beforeDestroy 销毁前状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el);
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data);
- console.log("%c%s", "color:red","message: " + this.message);
- },
- destroyed: function () {
- console.group('destroyed 销毁完成状态===============》');
- console.log("%c%s", "color:red","el : " + this.$el);
- console.log(this.$el);
- console.log("%c%s", "color:red","data : " + this.$data);
- console.log("%c%s", "color:red","message: " + this.message)
- }
- })
- </script>
- </body>
- </html>
整个流程各阶段:
beforeCreate
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
注:结合之前的MVVM_ada https://github.com/136shine/MVVM_ada ,理解了vue 的MVVM原理,能更好地理解生命周期
vue2.0 之 生命周期的更多相关文章
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿
在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...
- Vue2.0关于生命周期和钩子函数
Vue生命周期简介: Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下: 代码验证: <!DOCTYPE html> <html> <head& ...
- vue2.0组件生命周期探讨
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue2.0的生命周期
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程, 我们称这是Vue的生命周期.通俗说就是Vue实 ...
- Vue2.0 探索之路——生命周期和钩子函数
beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...
- 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
随机推荐
- POST上传多张图片配合Django接受多张图片
POST上传多张图片配合Django接受多张图片 本地:POST发送文件,使用的是files参数,将本地的图片以二进制的方式发送给服务器. 在这里 files=[("img",op ...
- @清晰掉 Sizeof与字符串
Sizeof与字符串 1.以字符串形式出现的,编译器都会为该字符串自动添加一个0作为结束符 如在代码中写 "abc",那么编译器帮你存储的是"abc/0" 2 ...
- JPagination分页插件的使用(ASP.NET中使用)
前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.asp ...
- node服务通过Jenkins上线流程
构建流程 构建服务器: 拉取指定分支代码 构建服务器: 安装依赖 构建服务器: 执行构建 构建服务器: 如果上线流程,则在 git 上创建 tag,供回滚使用 构建服务器:打包 node 服务代码,和 ...
- 转]@SuppressWarnings 详解
转自:http://gladto.iteye.com/blog/728634 背景知识: 从JDK5开始提供名为Annotation(注释)的功能,它被定义为JSR-175规范.注释是以 ...
- REST API (四)之Generic views
通用的视图 Django’s generic views... were developed as a shortcut for common usage patterns... 它们采取一些常见的习 ...
- 远程桌面 虚拟打印 到本地打印机(虚拟化 终端 远程接入 RemoteApp)
使用远程桌面或remoteapp进行打印时,若需使用本地的打印机,需要通过重定向方式,但本地打印机如果五花八门比较杂,那给服务器安装打印机驱动很麻烦. 其实可以借助虚拟打印机简化操作,省去给服务器安装 ...
- 【Linux 源码】Linux源码比较重要的目录
(1)arch arch是architecture的缩写.内核所支持的每一种CPU体系,该目录下都有对应的子目录. 每个CPU的子目录,又进一步分解为boot.mm.kernel等子目录,分别包含控制 ...
- 如何查看SQL Server某个存储过程的执行历史【转】
db_name(d.database_id) as DBName, s.name as 存储名称, s.type_desc as 存储类型, d.cached_time as SP添加到缓存的时间, ...
- 【SSL2325】最小转弯问题
题面: \[\Large\text{最小转弯问题}\] \[Time~Limit:1000MS~~Memory~Limit:65536K\] Description 给出一张地图,这张地图被分为 n× ...