目录直通车

一、 分三步流程解读

1、初始化显示

2、更新状态

3、销毁Vue实例

二、 常用的生命周期方法

三、 完整流程解读

实例代码

完整生命周期实例


生命周期也叫钩子。

我在官网找了一张图,千万不要觉得这张图好复杂就不去认真的分析了,反而去看别人写的博客,反而越整越懵。

就下面这张图,为大家详解生命周期,然后贴出实例代码。

生命周期说白了就是一套流程,而这套流程里面的方法就会有先后顺序的执行(调用了就执行,不调用就不会执行),整个流程分为三个步骤。

请看下图:

一、 分三步流程解读

1、初始化显示

new Vue() 表示创建一个Vue实例,这里假设vm是新建的实例。

按照图上的流程是:beforeCreate() ➡ created() ➡ beforeMount() ➡ mounted()

2、更新状态

beforeUpdate() ➡ updated()

3、销毁Vue实例

vm.$destory()

beforeDestory() ➡ destoryed()

beforeDestory(): 做收尾工作(就是在结束之前做一些事情,如: 清除定时器)。

二、 常用的生命周期方法

mounted,初始化之后就会立即调用。

created()/mounted():发送ajax请求, 启动定时器等异步任务。

三、 完整流程解读

created表示已经创建结束了(过去式嘛),再创建完成之前会做一些准备工作(比如说,监视数据,数据到最后都会实现数据绑定的,会用到set用于监视数据的变化),在做准备工作之前会先调用beforeCreate()

created之后会判断是否存在“el”的配置,这里会涉及到一个自动挂载页面和手动挂载页面的概念,如果有el的话会自动挂载,指定了el之后,就指定了Vue管理的一片区域,假设没有指定区域的话,那vue为谁服务呢?当然谁都不服务了。所以另外一种方式,就需要手动调用 vm.$mount(el) 指定一片区域,基本上是不会这么做的。

③ 接着执行到判断我们是否有 “template”这个配置,如果没有就直接编译 el 这篇区域的HTML代码作为模板。要注意Vue转换成的HTML代码是没有直接挂载到页面上去的,它在内存里编译好了以后,才会全部挂载到页面上显示。在挂载之前,就有beforeMount()这个函数,挂载完成之后调用Mounted()

④ 下面来到“更新”的一部分,挂载数据之后在页面更新之前会调用beforeUpdate(),页面发生变化之后会调用Updated()

⑤ 最后执行到“死亡” ,当调用vm.$destory()的时候,所有的组件都会移除,在移除之前会调用beforeDestory() 来做一些收尾的工作,比如说前面也提到了清除定时器,死亡之后再调用destory()

 

实例代码

打开浏览器的开发者然后调试工具分析代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
</head>
<body>

<div id="test">
  <button @click="destroyVue">destory Vue</button>
  <p v-if="isShow">Hello,World</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    mounted () {
      // 执行异步任务
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },

    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作
      clearInterval(this.intervalId)
    },

    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })

</script>
</body>
</html>

完整生命周期实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
</head>
<body>

<div id="test">
  <button @click="destroyVue">destory vue</button>
  <p v-if="isShow">Hello,world!</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    beforeCreate() {
      console.log('beforeCreate()')
    },

    created() {
      console.log('created()')
    },

    beforeMount() {
      console.log('beforeMount()')
    },

    mounted () {
      console.log('mounted()')
      // 执行异步任务
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },


    beforeUpdate() {
      console.log('beforeUpdate()')
    },
    updated () {
      console.log('updated()')
    },


    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作
      clearInterval(this.intervalId)
    },

    destroyed() {
      console.log('destroyed()')
    },

    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })


</script>
</body>
</html>

生命周期的原理的话,经得起折腾的朋友去了解一下吧~

如果您在阅读的过程中遇到了问题,欢迎评论留言告诉我。

最后,感谢您的阅读!

Logo

前往低代码交流专区

更多推荐