Vue 2.0 浅谈--生命周期和钩子函数

NikoManiac 发布于2019-08-20 17:03 / 934人阅读

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

前言

用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下.

生命周期和钩子函数-介绍

啥也不说先上图
图-1为 Vue 1.0 生命周期图,图-2为 Vue 2.0 生命周期图,图-3为Vue 1.0 和 Vue 2.0 钩子函数比较
重点看 Vue 2.0

生命周期和钩子函数-具体

上代码

自己粘走执行




    
    




     {{ message }}

打开F12可以查看生命周期各个时期的钩子函数的状态,如下图

由上图知:

1.beforeCrete: 此时,$el和data都为undefined,没有初始化
2.created:  创建后data初始化了,而$el没有
3.brforeMount: 挂在之前,$el和data都初始化了
4.mounted: Vue实例挂载完成了

注意: beforeMount红色矩形框里是{{message}},mounted的红矩形框里是xuxiao is boy,说明挂载前$el的值为"虚拟"的元素节点,挂载后"虚拟"的Dom节点被真实的Dom节点替换

数据更新(update)

在控制台里输入app.message = "数据更新"后

如下图

由此可见,当data数据变化时只会触发update

Vue实例解耦(destroy)

在控制台里输入app.$destroy();
如下图

由图知:

执行完destroy操作后,data里的数据没有变化,但是Dom结构还存在,也就是Vue实例不再受控制了,完成了解耦

生命周期和钩子函数-总结

如下图
这是把官方 Vue 2.0 生命周期的图例简化后的

生命周期钩子函数使用

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

最后的寄语

第一次在segmentfault写东西,写的不对的地方请多多见谅,也请帮我指正出来!

参考文章

https://segmentfault.com/a/11...
http://www.cnblogs.com/gagag/...

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

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

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

浅谈MVC,MVP,MVVM渐进变化及React与Vue比较

摘要：将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。此示例使用类似的语法，称为。执行更快，因为它在编译为代码后进行了优化。基于的模板使得将已有的应用逐步迁移到更为容易。前言因为没有明确的界定,这里不讨论正确与否,只表达个人对前端MV*架构模式理解看法,再比较React和Vue两种框架不同.写完之后我知道这文章好水,特别是框架对比部分都是别人说烂的,而我也是打算把...

DrizzleX 2019-08-26 10:36 评论0 收藏0
Vue 实例中的生命周期钩子详解

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

gityuan 2019-08-20 15:16 评论0 收藏0
详解vue生命周期

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

svtter 2019-08-21 16:47 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
vue入门笔记体系（二）vue生命周期

摘要：此时还未有选项钩子函数和间的生命周期完成后，会有一个判断过程，判断对象是否有选项。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。和钩子函数间的生命周期钩子函数在实例销毁之前调用。 vue生命周期这是vue生命周期的图示具体内容：showImg(https://segmentfault.com/img/bV4xju?w=1200&...

scola666 2019-08-23 10:30 评论0 收藏0