VUE入门02 vue生命周期

最新推荐文章于 2024-09-26 17:41:04 发布

啊点766

最新推荐文章于 2024-09-26 17:41:04 发布

阅读量172

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/qq_16546829/article/details/81637294

版权

前端框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

网上有一些哥们分享的面试题有关于VUE生命周期的官方给出下面的图来进行解释，不过直接看还是不太明白，以下记录是自己的理解和其他人的经验总结参考 https://segmentfault.com/q/1010000007704114?_ea=1431323 http://www.cnblogs.com/gagag/p/6246493.html https://segmentfault.com/a/1190000011381906

图中用红色虚线指引的红色框是 **钩子函数**

在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:

------	--- 函数名 -------	状态	description
1	beforeCreate	更新完成状态	组件实例刚刚被创建，组件属性计算之前，如data属性等
2	created	创建完毕状态	组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
3	beforeMount	挂载前状态	模板编译挂载之前
4	mounted	挂载结束状态	模板编译挂载之后（不保证组件已在document中）
5	beforeUpdate	更新前状态	组件更新之前
6	updated	更新完成状态	组件更新之后
6.1	activated	更新完成状态	for keep-alive，组件被激活时调用
6.2	deactivated	更新完成状态	for keep-alive，组件被移除时调用
7	beforeDestroy	销毁前状态	组件销毁前调用
8	destroyed	销毁完成状态	组件销毁后调用

我们将上图按照从上到下依次分为几个部分进行解析

1.在beforeCreate和created钩子函数之间的生命周期

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。注意看下：此时还是没有el选项

2.created钩子函数和beforeMount间的生命周期

在这一阶段首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。

vm.$mount(el) /*这个el参数就是挂在的dom接点*/

然后，我们往下看，template参数选项的有无对生命周期的影响。

（1） YES -如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。

（2） NO -如果没有template选项，则将外部HTML作为模板编译。

（3） 可以看到template中的模板优先级要高于outer HTML的优先级。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '这是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
    data: {
      message: 'Vue的生命周期'
    }
</script>
</html>

执行后的结果可以看到在页面中显示的是：

那么将vue对象中template的选项注释掉后打印如下信息：

这下就可以想想为什么el的判断要在template之前了~是因为vue需要通过el找到对应的outer template。

在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

可以看到页面中渲染的是

所以综合排名优先级： render函数选项 > template选项 > outer HTML.

3. beforeMount和mounted 钩子函数间的生命周期

beforeMount时el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。

4. mounted

在mounted之后可以看到挂载的内容发生了变化

5.beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

6.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

总结

一开始以为钩子就是为了查看生命周期用的后来想想我太天真了

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