Vue第一部分(6)：Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板、销毁等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这些函数在生命周期的不同阶段自动触发执行，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子	含义
beforeCreate（vue对象创建前）	组件实例刚被创建，组件属性计算之前，此时不能访问属性
created（创建后）	组件实例创建完，属性可以访问，但是还不能通过 $el 访问DOM
beforeMount(加载前)	模板编译、挂载之前，可以通过 $el 访问渲染前的DOM
mounted（载入后）	模板编译、挂载之后，可以通过 $el访问渲染前的DOM
beforeUpdate（更新前）	组件更新之前，可以获取组件更新前的DOM
updated（更新后）	组件更新之后，可以获取组件更新后的DOM
beforeDestroy（销毁前）	组件销毁前调用
destroyed（销毁后）	组件销毁后调用

通过以下案例，演示下各个钩子函数的使用：

<div id="app"><h1>{{msg}}</h1><button @click="changeMsg">点我修改msg</button>
</div><script>const vm = new Vue({el:"#app",data:{msg:"hell vue"},methods:{changeMsg(){this.msg = "hello baizhi";}},beforeCreate:function(){// alert("beforeCreate...");console.log("beforeCreate...");console.log(this.$el);//undefinedconsole.log(this.msg);//undefined},created:function(){// alert("created...");console.log("created...");console.log(this.$el);//undefinedconsole.log(this.msg);//hello vue},beforeMount:function(){// alert("beforeMount...");console.log("beforeMount...");console.log(this.$el);//加载前的标签，就是原始代码,插值表达式、事件绑定都还没解析console.log(this.msg);//hello vue},mounted:function(){// alert("mounted...");console.log("mounted...");console.log(this.$el);//加载后的标签，插值表达式、事件绑定均已解析console.log(this.msg);//hello vue},beforeUpdate:function(){// alert("beforeUpdated...");console.log("beforeUpdated...");console.log(this.$el.innerHTML);//更新前的DOMconsole.log(this.msg);//hello baizhi},updated:function(){// alert("updated...");console.log("updated...");console.log(this.$el.innerHTML);//更新后的DOMconsole.log(this.msg);//hello baizhi},beforeDestroy:function(){//在console中执行vm.$destroy()触发，开发时很少关注// alert("destroyed...");console.log("beforeDestroy...");console.log(this.$el);console.log(this.msg);},destroyed:function(){// alert("destroyed...");console.log("destroyed...");console.log(this.$el);console.log(this.msg);}})
</script>

说明：一般地，我们会在 created 钩子函数中，从服务端获取数据，并对数据进行初始化。

Vue第一部分(6)：Vue的生命周期相关推荐

Vue 的属性、方法和生命周期
实例 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&qu ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Vue笔记（五）——Token生命周期
Token 定义:令牌,一般用于用户身份验证 Token的特点随机性不可预测性时效性无状态跨域 node所需模块 jsonwebtoken 生成并加密Token // 设置对象 let us ...
vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读) 平时开发中,我真的不太 ...
Vue深入学习4—指令和生命周期
1.Vue是怎么识别 v- 指令的? 首先将HTML结构解析成属性列表,存入到数组中,接着遍历数组中的每一个节点,获取到不同指令对应的方法. // 将HTML看作真正的属性列表 var ndoeAtt ...
vue中beforeupdate意思_VUE的生命周期之beforeMount、mounted、beforeUpdate、updated
释放双眼,带上耳机,听听看~! beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行 ...
Vue —— 基础（六）（生命周期）
Vue2.x 系列文章目录内容参考链接 Vue2.x - 基础(零) 模板语法.数据绑定.el/data写法.MVVM模型 Vue2.x - 基础(一) 数据代理.事件处理.键盘事件 Vue2.x ...
Vue的系列之详解生命周期
生命周期介绍简单说就是一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期 vue的生命周期图 beforeCreate(创建前) beforeCreate(初始化页面前) 详情:实例初 ...
vue 中 created 和 mounted 钩子生命周期问题
正如前面一篇博客中遇到的钩子生命周期问题 ,如果对基本的原理不清楚就很难弄懂这个问题到底是什么原因造成的.所以今天我们就来简单的研究下这两个钩子到底是个啥意思 created 钩子 moun ...
RxJava 教程第一部分：入门之生命周期管理
原文出处:http://blog.chengyunfeng.com/?p=954#ixzz4KaYiN2oT Rx 背后的理念是:无法知道事件流何时发射数据.也不知何时结束发射,但是你需要控制何时开始 ...

Vue第一部分(6)：Vue的生命周期

生命周期图示

钩子函数

Vue第一部分(6)：Vue的生命周期相关推荐

最新文章

热门文章