Vue的生命周期

y1chuan 发布于2019-08-21 16:57 / 2126人阅读

摘要：和下面手动调用在控制台中输入在这个阶段会销毁实例，生命周期结束。外部实例中的函数显示的效果参考链接组件的生命周期详解生命周期

为什么要认识Vue的生命周期

Vue的生命周期是一个非常重要的点，如果不懂Vue的生命周期，那么很多时候，就不知道Vue的实际渲染时机，程序中会出现各种bug。

因此，学习Vue的生命周期是非常用必要的。

简单认识生命周期 前期准备

下面我们来画一个简单的生命周期图：

              new Vue()
                 ||
                 ||
                 ||
          初始化event和watch
                 ||
                 ||=====> beforeCreate
                 ||
       属性、方法、数据等内容的计算
                 ||
                 ||=====> created
                 ||
              存在el选项
                 ||
                 ||
                 ||
          不存在template选项
                 ||
                 ||=====> beforeMount
                 ||
         创建vm.$el替换el选项
                 ||
                 ||=====> mounted
                 ||
            当内容发生更新
                 ||
                 ||=====> beforeUpdate
                 ||
           虚拟DOM重新渲染
                 ||
                 ||=====> updated
                 ||
         调用vm.$destroy()
                 ||
                 ||=====> beforeDestroy
                 ||
     卸载watcher、子组件和事件监听=====> destroyed

生命周期图完成之后，根据这张图来写对应的代码：





  
  
  
  vue生命周期学习
  



  
    {{message}}
    
      {{item}}

从头到尾看生命周期

运行上面的程序，会在控制台中看到前四个生命周期钩子：

1.beforeCreate

在这个阶段，Vue实例中的事件监听和watch都已经初始化完成了。如果在Vue实例中写一个watch，就可以清晰的看出来了。

2.created

在这个阶段，Vue实例中的data、methods等内容都已经初始化完成了。

3.beforeMount

这个阶段会进行模板的渲染，把HTML结构渲染出来，但是Vue实例中的数据没有渲染到DOM中。

4.mounted

在这个阶段，el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。这个时候，Vue实例中的data会被渲染到DOM中。

5.beforeUpdate和updated

下面，手动更新数据，来调用其他的钩子函数。

// 在控制台宏输入
vm.message="123"

在这个阶段，会更新数据，并重新渲染DOM和虚拟DOM。

6.beforeDestroy和destroyed

下面手动调用：

// 在控制台中输入
vm.$destroy()

在这个阶段会销毁Vue实例，生命周期结束。

Vue实例中的template

Vue实例中不存在template

如果Vue中不存在template选项，那么会把外部的HTML作为template进行渲染。


  
    外部HTML : {{message}}

显示的效果：

Vue实例中存在template

如果Vue实例中存在template，那么就会优先使用Vue实例中的template作为模板进行渲染。


  
    外部HTML : {{message}}

显示的效果：

Vue实例中存在render函数

但是render函数更接近底层渲染机制，因此，存在render函数的话，render函数的优先级最高。


  
    外部HTML : {{message}}

显示的效果：

参考链接

vue组件的生命周期

详解vue生命周期

GPU云服务器云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88947.html

详解vue生命周期

摘要：注意看下此时还是没有选项钩子函数和间的生命周期在这一阶段发生的事情还是比较多的。钩子函数和钩子函数间的生命周期当发现中的数据发生了改变，会触发对应组件的重新渲染，先后调用和钩子函数。首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉： showImg(https://segmentfau...

svtter 2019-08-21 16:47 评论0 收藏0
vue生命周期

摘要：接触两个月了，今天说一说里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是里边可以操作属性，你记住就完事了，于是乎。。。接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。数据...

godlong_X 2019-08-23 18:38 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0
Vue 2.0 浅谈--生命周期和钩子函数

摘要：前言用也有一段时间了发现生命周期是很重要的一部分稍微懂得了一些东西特地来分享一下生命周期和钩子函数介绍啥也不说先上图图为生命周期图图为生命周期图图为和钩子函数比较重点看生命周期和钩子函数具体上代码自己粘走执行创建前状态创建完毕状态前言用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下. 生命周期和钩子函数-介绍啥也不说先上图图-1为 Vue...

NikoManiac 2019-08-20 17:03 评论0 收藏0