Vue生命周期及钩子

一、前言
Vue是一个专注于视图层的一个响应式的前端框架，而且使用起来特别简单、灵活以及横向扩展性极高，跨平台，目前也广受前端开发人员以及企业的喜爱，从某种程度上能够达到高效率开发生产

二、Vue中的MVVM的框架模式

我们所说的MVVM框架其实就是数据（model）、视图（view）、数据处理（vm），这三者之间的关系也就组成了MVVM框架，而且各层负责各自的功能，实现分离效果，层次分工化更加明确
view层主要代码就是我们前端的DOM元素
vm层就是负责数据处理也就是Vue实例中的方法调用，对于view层—>model层经过vm处理然后交给model层进行存放，对于model层—>view层取出数据并由vm处理交给DOM进行页面渲染
Model层主要就是存放页面中的单独数据

三、Vue生命周期及钩子介绍

首先参考官方文档给出的对应生命周期示例图

对应的beforeCreate()、created()、beforeMount()、Mounted()、beforeUpdate()、updated()、beforeDestroy()、destroyed()的这些函数都是在Vue实例化创建过程中以及创建完成内置的钩子函数，每个钩子函数对应着Vue实例在初始化及之后不同阶段可以进行调用处理一些事件函数
beforeCreate函数在初始化阶段形成，这个阶段对应的Vue中的元素绑定（el），data（）还未被初始化到

var vm = new Vue({el:"#app",data:{msg:"hello henry!"},beforeCreate(){console.log("beforeCreate方法被执行");console.log(this.msg);}
})

created函数到这个阶段对应的el、data数据已经注入到Vue实例中，可以进行调用，同上进行逻辑操作即可

created(){console.log("created方法被执行");console.log(this.msg);}

created函数之后回去判断在实例中是否有指定的模板引擎绑定el，若无则使用el指定的标签域来作为模板引擎
beforeMount函数在模板引擎还未挂在到浏览器的时候就会调用，这个时候浏览器是看不到浏览器展示内容的
mounted函数阶段该浏览器DOM已经展示基本就形成了Vue实例对象的阶段
当检测到页面数据被改动的时候会到beforeUpdate及update两个阶段，一个变化前一个变化后
beforeUpdata方法调用阶段，data数据被改变但页面数据还是原始状态
当虚拟DOM重新渲染到页面后执行Updated方法，data数据与页面数据一致
运行到beforeDestroy方法时，Vue对象准备销毁过程，但是还未被销毁对应的方法属性能够正常使用
destroyed对象被销毁生命周期结束

详细内容参考Vue官方文档：https://cn.vuejs.org/v2/guide/

Vue生命周期及钩子相关推荐

初探 Vue 生命周期和钩子函数
生命周期生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
Vue生命周期和钩子函数的一些理解
vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
Vue生命周期及其钩子函数
vue的生命周期.生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件目录一.Vue生命周期 1.vue实例从创建到销毁的过程 2.vue生命周期有4个阶段 3.父子 ...
Vue生命周期中钩子函数理解简记
Vue生命周期钩子函数钩子函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroy ...
vue生命周期、钩子理解
在vue文档中,对生命周期部分有如下视图: 看起来有些复杂,对于一些名词甚至还不是很熟悉,所以在查找后,我整理如下: new vue 创建vue实例 init events & lifecyc ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
vue 生命周期的11中方法详解
vue 生命周期的十一中方法详解 vue 生命周期的定义 vue实例从创建到销毁,也就是说从创建 -> 初始化数据-> 编译模版 -> 挂载Dom -> 渲染更新 -&g ...
vue跳转下个页面关闭当前页面_vue页面跳转 vue生命周期
1.vue页面跳转 // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) / ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

Vue生命周期及钩子

Vue生命周期及钩子相关推荐

最新文章

热门文章