vue生命周期

yeooo 发布于2019-08-20 17:34 / 733人阅读

摘要：官网生命周期图个人理解实例组件刚创建好，配置数据观测之前的阶段。数据更新时调用，发生在虚拟重新渲染和打补丁之前，该阶段不会触发附加的重渲染过程，该钩子在服务器端渲染期间也不会被调用。

vue官网生命周期图

个人理解

beforeCreate

实例组件刚创建好，配置数据观测（observe data）之前的阶段。el和data还未初始化。
在此阶段，一般处理loading事件之类的事情。

created

实例创建完成，完成属性绑定，这个阶段DOM并没有生成，$el属性不存在。el未初始化，data初始化。
此阶段，异步数据的请求操作宜在此调用，实现结束loading，做一些初始化处理，实现一些函数的自执行。

beforeMounted

模板编译之前的阶段。el和data完成初始化，computed计算属性中，只更改一次的属性会在此阶段加载。

mounted

完成模板编译之后的阶段。页面的vue指令编译成html代码，例如：

{{message}}

会编译成 compile completed!
。
此阶段，一般向后端发起请求，取到数据之后，配合钩子做一些处理。

beforeUpdated

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，该阶段不会触发附加的重渲染过程，该钩子在服务器端渲染期间也不会被调用。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
一般在此钩子出做统一数据更新操作，如果需要区分不同数据的更新，同时操作DOM，可以使用nextTick函数。

activated
keep-alive 组件激活时调用。

deactivated
keep-alive 组件停用时调用。

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

destroy
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83690.html

Vue的生命周期

摘要：和下面手动调用在控制台中输入在这个阶段会销毁实例，生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期为什么要认识Vue的生命周期 Vue的生命周期是一个非常重要的点，如果不懂Vue的生命周期，那么很多时候，就不知道Vue的实际渲染时机，程序中会出现各种bug。因此，学习Vue的生命周期是非常用必要的。 showImg(https://segmentfault...

y1chuan 2019-08-21 16:57 评论0 收藏0
详解vue生命周期

摘要：注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉： showImg(https://segmentfau...

svtter 2019-08-21 16:47 评论0 收藏0
vue生命周期

摘要：接触两个月了，今天说一说里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是里边可以操作属性，你记住就完事了，于是乎。。。接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。数据...

godlong_X 2019-08-23 18:38 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0
Vue 2.0 浅谈--生命周期和钩子函数

摘要：前言用也有一段时间了发现生命周期是很重要的一部分稍微懂得了一些东西特地来分享一下生命周期和钩子函数介绍啥也不说先上图图为生命周期图图为生命周期图图为和钩子函数比较重点看生命周期和钩子函数具体上代码自己粘走执行创建前状态创建完毕状态前言用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下. 生命周期和钩子函数-介绍啥也不说先上图图-1为 Vue...

NikoManiac 2019-08-20 17:03 评论0 收藏0