Vue 2.0中生命周期与钩子函数的一些理解

2024-12-02 23:59:39

前言

在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。

因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。

于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的（会放在最后）

vue生命周期简介

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。

生命周期探究

对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

ps:下面代码可以直接复制出去执行

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
 <p>{{ message }}</p>
</div>

<script type="text/javascript">

 var app = new Vue({
 el: '#app',
 data: {
  message : "xuxiao is boy"
 },
 beforeCreate: function () {
  console.group('beforeCreate 创建前状态===============》');
  console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
  console.log("%c%s", "color:red","data : " + this.$data); //undefined
  console.log("%c%s", "color:red","message: " + this.message)
 },
 created: function () {
  console.group('created 创建完毕状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el); //undefined
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化
 },
 beforeMount: function () {
  console.group('beforeMount 挂载前状态===============》');
  console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化
 },
 mounted: function () {
  console.group('mounted 挂载结束状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
  console.log("%c%s", "color:red","message: " + this.message); //已被初始化
 },
 beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data);
  console.log("%c%s", "color:red","message: " + this.message);
 },
 updated: function () {
  console.group('updated 更新完成状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data);
  console.log("%c%s", "color:red","message: " + this.message);
 },
 beforeDestroy: function () {
  console.group('beforeDestroy 销毁前状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data);
  console.log("%c%s", "color:red","message: " + this.message);
 },
 destroyed: function () {
  console.group('destroyed 销毁完成状态===============》');
  console.log("%c%s", "color:red","el : " + this.$el);
  console.log(this.$el);
  console.log("%c%s", "color:red","data : " + this.$data);
  console.log("%c%s", "color:red","message: " + this.message)
 }
 })
</script>
</body>
</html>

create 和 mounted 相关

咱们在chrome浏览器里打开，F12看console就能发现

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

另外在标红处，我们能发现el还是 {{message}} ，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

update 相关

这里我们在 chrome console里执行以下命令

app.message= 'yes !! I do';

下面就能看到data里的值被修改后，将会触发update的操作。

destroy 相关

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

app.$destroy();

生命周期总结

这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。

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

当然，还有更多，继续探索中......

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

浅谈Vue.js 1.x 和 2.x 实例的生命周期

在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init 在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3. b
vue组件生命周期详解

本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据做逻辑判断 destroy:beforeDestroy destroyed 清理工作代码: <!do
Vue实例中生命周期created和mounted的区别详解

前言本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注
基于Vue实例生命周期(全面解析)

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期图示下图是Vue实例生命周期的图示解释接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
详解Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项需要注意的
Vue.js实例方法之生命周期详解

本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap
Vue生命周期示例详解

首先看看Vue文档里关于实例生命周期的解释图那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&q
详解Vue生命周期的示例

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器

原教程: http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html 本博文是在原教程的基础上加上实例,并尝试说明的更详细. (十)Vue实例的生命周期如图:(我自己翻译的中文版,英文版请查看本博文顶部的,第一个链接) (八)传入的数据绑定先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在
Vue.js每天必学之构造器与生命周期

构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例: var vm = new Vue({ // 选项 }) 一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名. 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项.全部的选项可以在 API 文档中查看. 可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器: var MyC

Vue 2.0中生命周期与钩子函数的一些理解

相关推荐

随机推荐