vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比:
钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机
- <!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"
- },
//该阶段组件实例刚创建,组件属性计算之前(可理解为组件属性还未初始化,未绑定,未挂载元素el),
//比如:el,data,methods等,如果你试图在beforeCreated钩子中获取这些属性值,会得到undefine的结果,
//但是可以获取到this对象,因为此时组件刚被创建好,所以this已经引用了该组件对象 el和data
并未初始化- 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)
- },
//该阶段组件实例创建完成,组件属性绑定完成,但DOM还未生成,el属性还不存在 完成了data
数据的初始化,el
没有- 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); //已被初始化
- },
//该阶段组件实例已经创建完成,但是el还未挂载具体元素 完成了el
和data
初始化
应用 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted
挂载的时候再把值渲染进去。- 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); //已被初始化
- },
//该阶段组件实例已经创建完成,但是el已挂载具体元素,此时的el属性不为undefine- 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); //已被初始化
- },
// data中的值被修改了之后,将触发update的操作- 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);
- },
//我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。
但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。 app.$destroy()- 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 : 举个栗子:可以在这加个loading
事件
created
:在这结束loading
,还做一些初始化,实现函数自执行
mounted
: 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory
: 你确认删除XX吗? destoryed
:当前组件已被删除,清空相关内容
原文指路:https://blog.csdn.net/sexy_squirrel/article/details/60764504
vue生命周期 钩子函数的更多相关文章
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- vue生命周期钩子函数详解
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...
- Vue生命周期钩子函数加载顺序的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue生命周期钩子函数
<template> <div> <h2>this is from C.vue</h2> </div> </template> ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
随机推荐
- Linux电源管理(五)thermal【转】
本文转载自:https://blog.csdn.net/zhouhuacai/article/details/78172267 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...
- 关于linux下自定义的 alias文件和自定义函数库的通用写法(只适合自己的)
使用alias和自定义的function的必要性和重要性就不说了 , 自己的通用做法是: 可以创建: ~/bin/my.alias 文件 作为自定义的 alias专门文件 创建: ~/libsh/my ...
- 编译caffe的Python借口,提示:ImportError: dynamic module does not define module export function (PyInit__caffe)
>>> import caffeTraceback (most recent call last): File "<stdin>", line 1, ...
- [HDU 1976] Software Version
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1976 #include<iostream> #include<cstdio> ...
- elastic-job的原理简介和使用
转载:http://blog.csdn.net/fanfan_v5/article/details/61310045 elastic-job是当当开源的一款非常好用的作业框架,在这之前,我们开发定时任 ...
- 实现一个简单的flux
前言 众所周知,React跟Flux是一对好基友. 其中,市场流行的Flux有Redux,Mobx,Reflux. 其中,用法最简单的是Reflux. 其数据流思路如下: +---------+ +- ...
- Oracle Initialzation error instantclient_11_2 32位客户端问题
本地安装完oracle 用PLSql 连接是一堆的问题,折腾一上午终于解决了 下载一个 instantclient_11_2 32位的oracle客户端.放在oracle安装目录product下,在把 ...
- 总结react native 事件机制
React 事件机制 一个组件的所有事件会使用统一的事件监听器,绑定到组件的最外层,那么如何使用? bind方法,绑定并且可以传递参数 <TouchableOpacity onPress={th ...
- Redux基础使用
Redux基础使用: 简介:这里是从需求来响应的执行操作redux,所以理解起来更加的容易铭记在心的三点:action/reducer/store 除此之外就是react/react native的基 ...
- rm
rm [选项]... 目录... 删除指定的<文件>(即解除链接). -d --directory 删除可能仍有数据的目录 (只限超级用户)-f --force ...