Vue2.x之生命周期详解

① created表示已经创建结束了（过去式嘛），再创建完成之前会做一些准备工作（比如说，监视数据，数据到最后都会实现数据绑定的，会用到set用于监视数据的变化），在做准备工作之前会先调用beforeCreate()。② created之后会判断是否存在“el”的配置，这里会涉及到一个自动挂载页面和手动挂载页面的概念，如果有el的话会自动挂载，指定了el之后，就指定了Vue管理的一片区域，假设没有

MrDJun

4724人浏览 · 2018-12-16 15:44:32

MrDJun · 2018-12-16 15:44:32 发布

目录直通车

生命周期也叫钩子。

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

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

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

请看下图：

一、分三步流程解读

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>

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

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

最后，感谢您的阅读！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^