`Vue` 的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

通俗地来说 vue 的生命周期：就是 vue 实例从创建到销毁的过程，我将这个过程中的一些关键点抽取出来，简化为下面这个流程图

`Vue` 的生命周期与钩子函数

vue 2.0 提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应

钩子函数	描述
beforeCreate	在实例初始化之后，数据观测（data observer）和 event/watch事件配置之前被调用
created	在实例创建完成后立即被调用，在这一步实例已经完成了：数据观测、属性和方法的运算和 event/watch事件的回调，但是$el属性目前不可见。
beforeMount	在挂载开始之前被调用
mounted	在挂载成功后被调用，el被新创建的vm.$el替换
beforeUpdate	数据更新之前调用
update	数据更新完成时调用，组件dom已经更新
activated	组件被激活时调用
deactivated	组件被移除时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

结合代码理解钩子函数

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="app"><p>{{msg}}</p></div></body><!-- 1. 导入 vue.js --><script src="js/vue.js" type="text/javascript"></script><script>const vm = new Vue({el: '#app',data: {msg: 'Hello Vue！'},beforeCreate: function() {console.log(this.$el); //undefinedconsole.log(this.$data); //undefinedconsole.log(this.$methods); //undefined},created: function() {console.log(this.$el); //undefinedconsole.log(this.$data); //已经初始化console.log(this.methods); //undefined},beforeMount: function() {console.log(this.$el); //已经初始化，但没有真实数据console.log(this.$data); //已经初始化console.log(this.methods); //undefined},mounted: function() { //数据渲染到页面上console.log(this.$el); //已经初始化，有真实数据console.log(this.$data); //已经初始化console.log(this.methods); //undefined},beforeDestroy: function() { //实例销毁之前调用console.log(this.$el);console.log(this.$data);console.log(this.methods);},destroyed: function() { //实例销毁之后调用console.log(this.$el);console.log(this.$data);console.log(this.methods);}})</script>
</html>

运行结果

Vue的生命周期和钩子函数相关推荐

vue的生命周期和钩子函数的理解
对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来官方文档自己的理解 vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程. 具体 ...
初探 Vue 生命周期和钩子函数
生命周期生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
[vue] 你有写过自定义指令吗？自定义指令的生命周期（钩子函数）有哪些？
[vue] 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些? bind inserted update componentUpdated unbind 个人简介我是歌谣,欢迎和大家一起 ...
Vue的过滤器,生命周期的钩子函数和使用Vue-router
一.过滤器 1.局部过滤器在当前组件内部使用过滤器给某些数据添油加醋 //声明 filters:{'过滤器的名字':function(val,a,b){//a 就是alax ,val就是当前的数 ...
vue学习之生命周期，钩子函数执行顺序
vue的生命周期,钩子函授执行顺序一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Vue组件的生命周期以及钩子函数的作用
什么叫做生命周期一个组件从创建到销毁的过程叫做组件生命周期. Vue在生命周期中提供了一些函数可以在其内部实现一些业务逻辑并且这些函数会在一些特定的场合下执行. 组件的生命周期钩子函数大致可以分为三 ...
vue知识（四）生命周期、钩子函数、路由
文章目录一.生命周期 (一)vue生命周期二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...
Vue生命周期及其钩子函数
vue的生命周期.生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件目录一.Vue生命周期 1.vue实例从创建到销毁的过程 2.vue生命周期有4个阶段 3.父子 ...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

Vue的生命周期和钩子函数

目录

`Vue` 的生命周期

`Vue` 的生命周期与钩子函数

结合代码理解钩子函数

Vue的生命周期和钩子函数相关推荐

最新文章

热门文章

Vue的生命周期和钩子函数

目录

Vue 的生命周期

Vue 的生命周期与钩子函数

结合代码理解钩子函数

Vue的生命周期和钩子函数相关推荐

最新文章

热门文章

`Vue` 的生命周期

`Vue` 的生命周期与钩子函数