Vue2.0 生命周期和钩子函数的一些理解

最新推荐文章于 2024-07-28 11:31:52 发布

吾行远方

最新推荐文章于 2024-07-28 11:31:52 发布

阅读量351

点赞数

分类专栏：前端文章标签： vue.js 生命周期钩子

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

1、前言

在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。
因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。
于是我开始先去搜索，发现vue2.0的生命周期没啥文章。

2、vue生命周期简介

在这里插入图片描述

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

3、生命周期探究

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

<!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>

（1）create 和 mounted 相关
咱们在chrome浏览器里打开，F12看console就能发现

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载
另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

在这里插入图片描述
（2）update 相关
这里我们在 chrome console里执行以下命令

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

下面就能看到data里的值被修改后，将会触发update的操作。
在这里插入图片描述
（3）destroy 相关
有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
个人添加：destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

app.$destroy();

在这里插入图片描述

4、生命周期探究补充

（1）computed 计算属性
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue
（2）methods 方法
这里只提一下它和computed的区别
methods 和 computed 看起来可以做同样的事情，单纯看结果两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变
时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会
立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行
该函数。
（3）watcher
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
这里主要说深度watcher 加一个 deep:true，类似于深拷贝的深，可以监听数组和对象

（4）生命周期函数

	Vue.nextTick(function () {
		// DOM 更新了
	})
	在vue做表格的时候，一般在操作完之后，要更新列表刷新数据。但是我们本地做一些表格的变换，不想发请求怎么办？
	我们可以利用nextTick，比如，<templeate v-if="tab === 'a' "></template> ,
	在我们更新完数据，这个表格因为没有更新数据，所以它没有变化，
	我们可以 this.tab = ' '  this.$nextTick(() => this.tab = 'a'）

在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。
原因是什么呢，原因是
a、在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，
所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。
与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染此时在该钩子函数中
进行任何DOM操作都不会有问题。
b、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，
这个操作都应该放进 Vue.nextTick() 的回调函数中。

5、组件套用时生命周期：

父组件：tabs
子组件：tab、tab-container
应用场景举例：

	<tabs>
	  <tab />
	  <tab />
	  <tab />
	  <tab-container />
	</tabs>

先执行父组件的created和beforeMounted函数；再按子组件的使用顺序，执行子组件的created和beforeMounted函数；
依旧按照子组件的执行顺序执行mounted函数，最后是父组件的mounted函数；
也就是说父组件准备要挂载还没挂载的时候，子组件先完成挂载，最后父组件再挂载；
所以在真正整个大组件挂载完成之前，内部的子组件和父组件之间的数据时可以流通的（好难表达。。。。）

6、生命周期总结

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

beforecreate : 举个栗子：可以在这加个loading事件 ，在加载实例时触发 
created ： 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 可以做一个确认停止事件的确认框，你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
beforecreate : 可以在这加个loading事件
updated : 如果对数据统一处理，在这里写上相应函数
nextTick : 更新数据后立即操作dom

本文转载自:Vue2.0 探索之路——生命周期和钩子函数的一些理解