Vue2.0生命周期的理解

2024-09-29 14:18:08

网上已经有很多关于vue生命周期的文章，我的这篇文章的由来，其实是我对官网上描述的一句话的思考与理解：“el被新创建的vm.$el替换”，所以文章更多的内容可能是在对vue生命周期中“created -> beforeMount -> mounted” 过程的理解。

beforeCreate --> created 之间

在这个阶段初始化事件，进行数据观测。

created

vue实例创建完后被调用，此时已经完成了数据观测(data observer)，属性和方法的运算，watch/event 事件回调的配置。

可调用methods中的方法，访问和修改data中的数据，并触发响应式变化使DOM渲染更新，触发watch中相应的方法，computed相关属性进行重新计算。

一般在created时，进行ajax请求初始化实例数据。

此时，vm.$el不可见。

created --> beforeMount 之间

在这个过程中，

　　a、首先判断实例中是否有el选项，有的话继续向下编译，没有的话会停止编译，直到vm.$mount(el)被调用时才继续（el是挂载的DOM节点）；

　　b、接下来判断实例中是否有template，有的话将其作为模板编译成rander函数；

　　c、没有template的话就，就将挂载DOM元素的html（即el所对应的DOM元素及其内部的元素）提取出来作为模板编译；

*注：el所对应的DOM元素不能为body/html元素，因为在后面vue实例挂载时，el所对应的DOM元素及其内部的元素会被模板渲染出来的新的DOM所替换。

　　d、如果实例对象中有rander函数，就直接通过它进行渲染操作。

优先级：rander函数 > template > 外部html

此时，rander函数已经准备好并首次被调用。

在这个过程中，$el被初始化为实例中el选项所对应的DOM元素，所以在beforeMount时，用vm.$el获取到的是挂载DOM元素的html。

beforeMount

beforeMount被调用时，此时$el可见。

beforeMount --> mounted 之间

在这个过程中，el被新创建的vm.$el所替换，并完成实例的挂载。即实例中的el选项被模板渲染创建出来的DOM元素所替换，页面中的挂载点被渲染出的vue实例代码段所替换。

Mounted

此时实例已挂载到DOM上，可以通过DOM API获取实例中DOM节点。在控制台打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM。

下面通过栗子看一下这两个过程。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
<div id="app">
  <a id='ela' href="">{{message}}</a>
</div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        message: 'hello'
      };
    },
    template: '<p id="elp">{{message}}</p>',
    beforeMount: function () {
      console.group('beforeMount 挂载前状态===============》');
      let state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      let a = document.getElementById('ela');
      let p = document.getElementById('elp');
      console.log(this.$el);
      console.log(state);
      console.log(a);  // <a id='ela' href="">{{message}}</a>
      console.log(p);   // null
    },
    mounted: function () {
      console.group('mounted 挂载结束状态===============》');
      let state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      let a = document.getElementById('ela');
      let p = document.getElementById('elp');
      console.log(this.$el);
      console.log(state);
      console.log(a);  // null
      console.log(p);   // <p id="elp">father</p>
    }
</script>
</html>

用template/rander选项可以在控制台清楚的看到：挂载完成后，el被新创建的vm.$el替换。

挂载前是以初始的el和虚拟DOM的形式存在的，此时以template中的内容为模板，模板内容不可见，打印p标签为null；

挂载后，模板渲染的新DOM替换原来的el，原el所对应的DOM不存在，打印a标签为null。

beforeUpdate 和 updated

当data对象中数据更新时，会触发 beforeUpdate钩子，此时view层还没有更新。 beforeUpdate有下面几个需要注意的地方：

　　a、更新的数据必须在模板中直接或间接的使用，才会触发beforeUpdate；

　　b、在挂载之前，data中数据更新不会触发 beforeUpdate！即在created、beforeMount时改变数据不会触发更新流程；

　　c、如果在beforeUpdate中，再次修改了该数据的值，会再次触发beforeUpdate钩子，进行两次更新流程。

updated时，view层已更新完毕。

（在上面的代码中增加两个钩子）

mounted: function () {
  this.message = 'first';
//   this.show = false;    // 由于模板中没有用到show，所以show的改变不会触发beforeUpdate
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
},
updated: function () {
  console.group('updated 更新完成状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

这里需要注意一点：view层我们需要通过innerHTML获取对应元素节点中的内容，而不能直接获取元素节点。直接获取元素节点，在控制台打印出来的view层中的数据都是更新之后的状态，不能打印出实时的正确的值，这应该和Chrome控制台的输出有关。

针对第三条，我们看一下下面的代码演示：

mounted: function () {
  this.message = 'first';
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  this.message = 'second';  // 此时在beforeUpdate中再次修改了message的值
},
updated: function () {
  console.group('updated 更新完成状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

这里我们可以清楚的看到进行了两次更新流程，但是对打印的结果有些疑问：第一次将message的值改为first，并且以first来渲染更新DOM，那么第一次调用updated时，message和DOM中的值都应该是first，而此时打印出来的时second。我理解的是，在第一次执行updated时，DOM就已经完成了第二次渲染更新，具体的过程还需要通过之后对源码的学习去理解。这里各位有不同的理解或者更详细的解释，可以在评论区留言，共同学习。

在这里，我们可以在beforeUpdate中加定时器去修改message的值，就可以等待第一次数据改变，DOM更新渲染完成后，进行第二次数据改变。

beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  var that = this;
  setTimeout(function(){
  　　that.message = 'second';
  });
//  this.message = 'second';  // 此时在beforeUpdate中再次修改了message的值
},

这里可以清楚看到两次数据改变时，数据和view层的更新状态。

beforeDestroy 和 destroyed

beforeDestroy：实例在销毁之前调用，此时实例仍然可用。

beforeDestroy -> destroyed： Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

destroyed：vue实例销毁后调用。

结尾：关于vue生命周期就总结完毕，有错误的地方烦请指出，会及时修改！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于Vue实例生命周期(全面解析)

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

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h
详解Vue 实例中的生命周期钩子

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

本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip
Vue.js实例方法之生命周期详解

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

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

前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介咱们从上图可以很明显的看出现在vue2.0
Vue的生命周期操作示例

本文实例讲述了Vue的生命周期操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的生命周期</title> <script type="text/javascript" src="https://cdn.bootcss.com

Vue2.0生命周期的理解

相关推荐

随机推荐