VueJS生命周期

最新推荐文章于 2022-04-18 15:24:04 发布

少营营

最新推荐文章于 2022-04-18 15:24:04 发布

阅读量123

点赞数

分类专栏： vue 文章标签： VueJS生命周期

本文链接：https://blog.csdn.net/weixin_35674711/article/details/95591837

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 什么叫生命周期？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

2. 什么叫钩子函数？

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个Vue实例被创建之后执行代码，例如ajax可以在created钩子函数下运行，对页面数据初始化：

3. 生命周期

vue在生命周期中有这些钩子函数，

beforeCreate,created,

beforeMount,mounted,

beforeUpdate,updated,

beforeDestroy,destroyed。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了哪些操作，我们先看下面执行的例子

测试代码

demo13.html

【需求】：演示vue对象的创建、赋值、显示、改值、销毁的全过程，即Vue的生命周期，同时使用钩子函数添加自己的业务逻辑

<!DOCTYPE html>
<html>

   <head>
      
      <script src="js/vuej<meta charset="utf-8" />
      <title>vuejs生命周期</title>s-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         {{message}}
      </div>
   </body>
   <script>
      var vue = new Vue({
         el: "#app",
//template: "<fort color='red'>{{message +'！   我爱 黑马程序员'}}</fort>", //在vue配置项中修改的
         data: {
            message: 'hello world'
         },
         beforeCreate: function() {
            showData('创建vue实例前', this);
         },
         created: function() {
            showData('创建vue实例后', this);
         },
         beforeMount: function() {
            showData('挂载到dom前', this);
         },
         mounted: function() {
            showData('挂载到dom后', this);
         },
         beforeUpdate: function() {
            showData('数据变化更新前', this);
         },
         updated: function() {
            showData('数据变化更新后', this);
         },
         beforeDestroy: function() {
            showData('vue实例销毁前', this);
         },
         destroyed: function() {
            showData('vue实例销毁后', this);
         }
      });

      function showData(process, obj) {
         console.log(process);
         console.log('data 数据：' + obj.message)
         console.log('vue挂载的dom对象：')
         console.log(obj.$el)
         console.log('真实dom结构：' + document.getElementById('app').innerHTML);
         console.log('------------------')
         console.log('------------------')
      }
//vue.$mount("#app");
      vue.message = "good...";
      vue.$destroy();
   </script>

</html>

查看谷歌浏览器。

总结：

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

created ：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数，页面的初始化）

beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作。

当我们的data发生改变时，会调用beforeUpdate和updated方法

beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变

updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到

dom上面，完成更新

当调用vue.$destroy()，用来销毁vue。

beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有model对象数据

与view的绑定，即数据驱动