vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数：
<template>
<div id='app'>
{{message}}
</div>
</template>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
},
生命周期钩子函数: function() {
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
}
})
主要可以通过测试查看 vue 对象的 $el, $data 两个状态值，来确定当前的钩子函数所做的事情
beforeCreate: el 和 data 并未初始化，可以在这加个loading事件
created: 完成了 data 数据的初始化，el没有，在这结束loading，还做一些初始化，实现函数自执行
注意：created之后this指针便执行了vue实例
beforeMount: 完成了 el 和 data 初始化，挂载前此时只是创建了虚拟DOM，页面中真实DOM元素上还是占位符
mounted: 完成挂载，在这发起后端请求，拿回数据，配合路由钩子做一些事情
以上生命周期函数全部执行完成后，页面渲染完成
此后当this.$data对象中的某个属性值发生改变时，将会触发beforeUpdate和updated两个函数对DOM进行更新，页面重新渲染完成
app.message = hello world
beforeUpdate:
updated:
当调用 app.$destroy() 函数之后，会触发beforeDestroy 和 destroyed 两个函数，
beforeDestroy: 此时vue实例还能正常使用，可做如下判断：你确认删除XX吗？
destroyed: vue实例被删除，清空相关内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body> <div id="app">{{message}}</div>
<script src="./lib/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
created: function () {
console.group('created 创建完毕状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
mounted: function () {
console.group('mounted 挂载结束状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
updated: function () {
console.group('updated 更新完成状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
// this.message = '世界你好'
// console.log(this.$el)
// console.log(this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》')
console.log(this.$el)
console.log(this.$data)
console.log(this.message)
// this.message = 'Vue的世界你好'
// console.log(this.$el)
// console.log(this.message)
}
})
</script>
</body>
</html>
打开控制台：
将 beforeDestroy 中的注释代码打开，如下两图 图2 图3 所示
图2
图3
将 destroyed 中的注释代码打开，如下两图 图4 图5 所示
图4
图5
表示对后两种显现不是很理解，以后待补充。。。
vue2.0 生命周期 简析的更多相关文章
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- 详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
- Vue2.0 - 生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue2.0生命周期
https://www.cnblogs.com/goloving/p/8616989.html(copy )
- vue2.0生命周期详解
首先上图展 <template> <div id="home"> <p>{{ message }}</p> </div> ...
- 02Vue2.0+生命周期
Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- vue2.x生命周期
vue2.x生命周期 1. beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. 2. created 实例已经创建 ...
随机推荐
- 最近总想着写一个模拟alert和confirm插件，代替原生的
msgbox-confirm github: https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...
- $bzoj1016-JSOI2008$ 最小生成树计数 最小生成树 $dfs/matrix-tree$定理
题面描述 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的 ...
- es xxx_by_query
xxx_by_query包括_delete_by_query和_update_by_query,下面分开讲 _delete_by_query 相当于sql中的delete from a where . ...
- sort sorted() reverse() reversed() 的区别1
sort()是可变对象(字典.列表)的方法,无参数,无返回值,sort()会改变可变对象,因此无需返回值.sort()方法是可变对象独有的方法或者属性,而作为不可变对象如元组.字符串是不具有这些方法的 ...
- mojing SDK根据坐标进行移动
using UnityEngine; using UnityEngine.UI; using System.Collections; public class transforms : MonoBeh ...
- Junit参数化
数据驱动测试:测试代码要与测试数据分离 哎~~学习时发现一个问题,写完了测试文件,右击文件时没有run as ->junit test的选项,找了好半天,终于知道了原因,是方法前没有加stati ...
- Yii “CDbConnection failed to open the DB connection: could not find driver"解决办法
前言:用Yii框架做项目时,有时会遇到“CDbConnection failed to open the DB connection: could not find driver”这个问题,这个问题通 ...
- Git学习系列之 Git 、CVS、SVN的比较
Git .CVS.SVN比较 项目源代码的版本管理工具中,比较常用的主要有:CVS.SVN.Git 和 Mercurial (其中,关于SVN,请参见我的博客:SVN学习系列) 目前Google C ...
- 配置vim插件遇到youcompleteme插件问题解决方案
今天在Opensuse下配置vim 遇到两个问题 配置插件找到一个很好的博客.学到一些有用技巧 http://hahaya.github.io/2013/07/26/use-vundle.html 但 ...
- CentOS6.4 安装Redis
按照下面步骤依次执行1.检查依赖,安装依赖 [root@ecs-3c46 ~]# whereis gcc gcc: /usr/bin/gcc /usr/lib/gcc /usr/libexec/gcc ...