Vue2.0七——生命周期

vue2.0新增的

什么是vue的生命周期

指的是实例从创建到销毁的过程，就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
，我们称这是 Vue 的生命周期。

生命周期的作用

生命周期中有多个钩子函数，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

总共有八个阶段也就是八个钩子函数

创建前/后, 载入前/后,更新前/后,销毁前/销毁后

页面第一次加载的时候会触发beforeCreate, created, beforeMount, mounted 这几个钩子，DOM 渲染在 mounted 中就完成

每个周期的具体场景
1、beforeCreate

   在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2、created

   实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3、beforeMount

   在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted

   el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5、beforeUpdate

   数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6、updated

   由于数据更改导致的虚拟 DOM，重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

7、beforeDestroy

   实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed

   Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

Vue2.0七——生命周期相关推荐

Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
vue2.0组件生命周期探讨
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue ...
Vue2.0 探索之路——生命周期和钩子函数
vue生命周期简介 Lifecycle hooks 在这里插入代码片生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. ps:下面代码可以 ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
AspNet2.0页面生命周期
AspNet2.0页面生命周期页面框架通过如下过程处理aspx文件请求: 1:解析aspx文件,并创建一个控件树: 2:使用控件树动态实现一个继承自Page类的类或者控件 : ...
vue2 与 vue3 生命周期对比
周期对比 vue2 vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUp ...
【Vue2.0】—生命周期函数（十）
生命周期函数生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子是什么:Vue在关键时刻帮我们调用一些特殊名称的函数生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 ...
Vue2.和Vue3.生命周期的区别，对比。详解生命周期中的每个钩子函数，setup,
文章目录 #1.Vue2.的生命周期与Vue3.的生命周期对比图 #1.1白色背景图是Vue2.的生命周期,黑色背景图是Vue3.的生命周期. #2.Vue2.与Vue3.的生命周期函数的不同 #2. ...
Maven学习小结（七生命周期[转]）
Maven2的阶段(生命周期)说明: Maven2拥有三套独立的生命周期,Maven的命令也是基于这些生命周期来说的. 1.clean:清理先前构建的构件,又分为下面三个下阶段: a.pre-clea ...
AspNet2.0页面生命周期的各个事件细节
页面框架通过如下过程处理aspx文件请求: 1:解析aspx文件,并创建一个控件树: 2:使用控件树动态实现一个继承自Page类的类或者控件 : 3:动态编译类: 4: ...

Vue2.0七——生命周期

vue2.0新增的

Vue2.0七——生命周期相关推荐

最新文章

热门文章