Vue生命周期学习总结

官方文档上关于Vue生命周期的图片大家一定很熟悉：

1、beforeCreate

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。
2、created
挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
3、beforeMount
接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
4、mounted
接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
5、beforeUpdate
当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿。
6、updated
当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom。
7、beforeDestroy
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。
8、destroyed
组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。

下面将通过一段代码示例来说明Vue生命周期的各个阶段，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue生命周期</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body><div id="app"><div>{{message}}</div><button @click="handleClick">更新</button></div>
</body>
<script>var vm = new Vue({el: '#app',data: {message: 'Vue的生命周期'},beforeCreate() {console.log('-----------beforeCreate阶段-----------');console.log('el: ' + this.$el);console.log('data: ' + this.$data);console.log('message: ' + this.message);},created() {console.log('-----------created阶段-----------');console.log('el: ' + this.$el);console.log('data: ' + this.$data);console.log('message: ' + this.message);},beforeMount() {console.log('-----------beforeMount阶段-----------');console.log('el: ' + this.$el);console.log(this.$el);console.log('data: ' + this.$data);console.log('message: ' + this.message);},mounted() {console.log('-----------mounted阶段-----------');console.log('el: ' + this.$el);console.log(this.$el);console.log('data: ' + this.$data);console.log('message: ' + this.message);},beforeUpdate() {console.log('-----------beforeUpdate阶段-----------');console.log('el: ' + this.$el);console.log(document.getElementById('app').innerHTML);console.log('data: ' + this.$data);console.log('message: ' + this.message);},updated() {console.log('-----------updated阶段-----------');console.log('el: ' + this.$el);console.log(document.getElementById('app').innerHTML);console.log('data: ' + this.$data);console.log('message: ' + this.message);},beforeDestroy() {console.log('-----------beforeDestroy阶段-----------');console.log('el: ' + this.$el);console.log(document.getElementById('app').innerHTML);console.log('data: ' + this.$data);console.log('message: ' + this.message);},destroyed() {console.log('-----------destroyed阶段-----------');console.log('el: ' + this.$el);console.log(document.getElementById('app').innerHTML);console.log('data: ' + this.$data);console.log('message: ' + this.message);},methods: {handleClick(e) {this.message = '更新了message状态';}}})
</script>
</html>

运行代码后在浏览器控制台打印信息如下：

转载于:https://www.cnblogs.com/fengyuexuan/p/11224236.html

Vue生命周期学习总结相关推荐

详解vue生命周期(重点！！)
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: 可以看出在vue--整个的生命周期中会有很多 ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
Vue 学习笔记（2）Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发局部组件的开发组件中 props 的使用在组件上声明静态数据传递给组件内部在组件上声明动态数据传递给组件内部 pr ...
vue生命周期整理学习
生命周期图如下: 生命周期过程: 生命周期过程中,首先创建vue实例,然后初始化事件并监测数据.在created阶段之前就完成了数据的监测(这个阶段data和data的属性已存在,但是el未初始化) ...
Vue学习 — 详解Vue生命周期
目录一.前言二.生命周期 1.beforeCreat / created (1).beforeCreat: (2).created: 2.eforeMount / mounted (1).befo ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...

Vue生命周期学习总结

Vue生命周期学习总结相关推荐

最新文章

热门文章