Vue.js知识总结——生命周期
来源:互联网 发布:梅露露 保存数据不存在 编辑:程序博客网 时间:2024/05/16 01:22
Vue实例跟生物一样,也有自己的“生命”,实例也会经历出生至死亡的各个阶段。
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码。
1. beforeCreate
此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好。
我们试着console一下实例的数据data和挂载元素el,代码如下:
<div id="app">{{name}}</div> <script> let app = new Vue({ el:"#app", data:{ name:"张三" }, beforeCreate(){ console.log('即将创建'); console.log(this.$data); console.log(this.$el); } }); </script>
得到的结果是:
此时的实例中的data和el还是undefined,不可用的。
2. created
beforeCreate之后紧接着的钩子就是创建完毕created,我们同样打印一下数据data和挂载元素el,看会得到什么?
在上一段代码的基础上,加上下面这段代码:
created(){ console.log('创建完毕'); console.log(this.$data); console.log(this.$el);}
我们看到打印的结果:
此时,我们能读取到数据data的值,但是DOM还没生成,所以属性el还不存在,输出data为一个Object对象,而$el的值为undefined。
3. beforeMount
上一个阶段我们知道DOM还没生成,属性el还为undefined,那么,此阶段为即将挂载,我们打印一下此时的$el是什么?
增加一下代码:
beforeMount(){ console.log('即将挂载'); console.log(this.$el);}
我们看到打印结果:
此时的$el不再是undefined,而是成功关联到我们指定的dom节点<div id=”app”></div>
,但此时{{ name }}还没有被成功地渲染成我们data中的数据。
4. mounted
mounted也就是挂载完毕阶段,到了这个阶段,数据就会被成功渲染出来,我们编写mounted的钩子,打印$el 看看:
mounted(){ console.log('挂载完毕'); console.log(this.$el); }
打印结果:
此时打印属性el,我们看到{{ name }}已经成功渲染成我们data.name的值:“张三”。
5. beforeUpdate
当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate。
html片段代码我们加上ref属性,用于获取DOM元素。
<div ref="app" id="app"> {{name}} </div>
Vue实例代码加上beforeUpdate钩子代码:
beforeUpdate(){ console.log('=即将更新渲染='); let name = this.$refs.app.innerHTML; console.log('name:'+name);},
修改一下实例的数据name,在更新渲染之前,我们打印视图中文本innerHTML的内容会是多少:
我们在控制台把app.name的值从原来的 “张三” 修改成 “l李四”,在更新视图之前beforeUpdate打印视图上的值,结果依然为原来的值:“张三”,表明在此阶段,视图并未重新渲染更新。
6. updated
此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容,接着上面的案例,我们添加钩子updated的代码,如下:
updated(){ console.log('==更新成功=='); let name = this.$refs.app.innerHTML; console.log('name:'+name); }
两个不同阶段打印的name的值是不一样,updated阶段打印出来的name已经是最新的值:“李四”,说明此刻视图已经更新了。
7. beforeDestroy
调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子。
8. destroyed
成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑。
我们通过在销毁前通过控制台修改实例的name,和销毁之后再次修改,看看情况。
beforeDestroy(){ console.log('销毁之前'); }, destroyed(){ console.log('销毁成功'); }
结果如下:
销毁之前,修改name的值,可以成功修改视图显示的内容为:“更新视图”,一旦效用实例的$destroy( )方法销毁之后,实例与视图的关系解绑,再修改name的值,已于事无补,视图再也不会更新了,说明实例成功被销毁了。
- Vue.js知识总结——生命周期
- Vue.js知识总结——指令
- Vue.js知识总结——组件
- 【06】vue.js — 生命周期
- Vue.js知识总结 (一)
- Vue.js 生命周期
- Vue.js的生命周期
- vue.js生命周期
- Vue.js的生命周期
- vue.js之生命周期
- vue.js中生命周期与相关函数的使用总结
- vue生命周期总结
- 【Vue】—Vue.js入门教程
- vue-router 知识总结
- vue学习知识总结
- vue.js 生命周期代码详解
- vue.js生命周期的理解
- vue.js生命周期钩子详解
- hdu 1848 Fibonacci again and again(nim博弈)
- android 第三方app截图
- Express 框架
- linux c++多进程
- JZOJ3426. 【NOIP2013模拟】封印一击 (2017.8B组)
- Vue.js知识总结——生命周期
- 初学oracle 第三天 体系结构
- 将输入字符串中的字符按如下规则排序。 规则 1 :英文字母从 A 到 Z 排列,不区分大小写
- 数字0-9的数量 数位dp
- markdown编辑器添加表格
- 设计模式——抽象工厂模式及在jdk中的应用+几种工厂模式的比较
- 静态和动态包含的区别与联系
- linux多线程编程
- java设计模式之单例