首先我们先附上官网的图

图中展现出的是vue整个生命周期以及钩子函数

1-　　beforeCreate(创建前)

2-　　created(创建完成)

3-　　beforeMount(挂载前)

4-　　mounted(挂载完成)

5-　　beforeUpdate(更新前)

6-　　updated(更新完成)

7-　　beforeDestroy(销毁前)

8-　　destroyed(销毁完成)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <div id='app'>

    <button @click="btnclick">点击更新</button>

    <h1>{{message}}我是outerHTML</h1>

  </div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <script>

    const app = new Vue({

      el: '#app',

      //template:"<h2>{{message}}--我位于template里</h2>", // vue实例内部

      // render:function(creatElement){

      //   return creatElement("h2","this is renter函数内部")

      // },

      data: {

        message:"hello vue!"

      },

      beforeCreate:function(){

        console.log("beforeCreate(创建前):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      created: function () {

        console.log("created(创建完成):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      beforeMount: function () {

        console.log("beforeMounted(挂载前):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      mounted: function () {

        console.log("mounted(挂载完成):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      beforeUpdate: function () {

        console.log("beforeUpdate(更新前):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      updated: function () {

        console.log("updated(更新后):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      beforeDestroy: function () {

        console.log("beforeDestroy(销毁前):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      destroyed: function () {

        console.log("destroyed(销毁后):");

        console.log(this.$el);

        console.log(this.$data);

        console.log(this.message);

      },

      methods:{

        btnclick:function(){

          this.message = "hello world!";

        }

      }

    })

  </script>

</body>

</html>

　　源代码如上,运行结果,之后点击更新按钮,控制台截图

调用了一些我们的钩子函数

1. 在beforeCreate和created之间

进行初始化事件，数据的观测，在 created 的时候数据已经和 data 属性进行绑定。但此时尚未挂载，el 还不可用。

2. 在created和beforeMount之间

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

当我们没有el选项时,注释掉el选项,再运行看控制台:

我们可以看到,没有el选项时,直接到created就结束了.

当我们有el选项时,

则会进行下一步,看看对象是否有template选项

render>template>outerhtml

outerHTML就是在html代码块中的代码模板

template在vue实例内部定义的模板

render函数

下面我们先写上outerHTML,运行看结果:

然后在这个得基础上去掉代码中的template选项的注释,我们运行下看结果:

然后在上面的基础上,我们将render函数选项注释去掉,再来看看我们的结果:

很明显,我们就比较出了,他们的优先级别:  render  >   template   >outerHTML

3. 在beforeMount和Mounted之间

给对象添加了el选项,我们也可以看替换掉挂载的 DOM 元素。

4.mounted

在beforeMounted时,h1中的内容通过{{message}}进行占位,此时还没有被挂载到页面上,还是处于VDOM的形式存在. 在mounted之后才被挂载完成

5.在beforeUpdate和update之间

我们图中有按钮,点击更新则会触发这两个钩子函数

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

当更新完成后，执行updated，数据已经更改完成，DOM也重新render完成，可以操作更新后的VDOM.

7.  当经过某种途径调用$destroy方法后，在实例销毁之前 立即执行beforeDestroy，在实例销毁之前调用。在这一步，实例仍然完全可用。一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8. 组件的数据绑定、监听...去掉后只剩下DOM空壳，这个时候，执行 destroyed钩子函数。调用后，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。  在Vue 实例销毁后调用.

vue的生命函数周期以及钩子函数的详解的更多相关文章

  1. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  2. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  3. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  5. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  6. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  7. vue学习（五）生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

  8. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  9. Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

随机推荐

  1. Cypress系列（6）- Cypress 的重试机制

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 重试(Retry-ability) ...

  2. css3 属性阴影效果--box-shadow,text-shadow

    1.text-shadow:h-shadow v-shadow blur color; h-shadow:水平阴影的位置,可以是负值,正值向右,负值向左 v-shadow:水平阴影的位置,可以是负值, ...

  3. Java实现蓝桥杯-算法提高 P1003

    算法提高 P1003 时间限制:1.0s 内存限制:256.0MB 作为一名网络警察,你的任务是监视电子邮件,看其中是否有一些敏感的关键词.不过,有些狡猾的犯罪嫌疑人会改变某些单词的字母顺序,以逃避检 ...

  4. Java实现 蓝桥杯 算法提高 文本加密

    算法提高 9-2 文本加密 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 先编写函数EncryptChar,按照下述规则将给定的字符c转化(加密)为新的字符:"A&quo ...

  5. Java实现 LeetCode 258 各位相加

    258. 各位相加 给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. 示例: 输入: 38 输出: 2 解释: 各位相加的过程为:3 + 8 = 11, 1 + 1 = 2. 由 ...

  6. Java实现 LeetCode 38 外观数列

    38. 外观数列 「外观数列」是一个整数序列,从数字 1 开始,序列中的每一项都是对前一项的描述.前五项如下: 1 11 21 1211 111221 1 被读作 "one 1" ...

  7. Java实现蓝桥杯勾股定理

    勾股定理,西方称为毕达哥拉斯定理,它所对应的三角形现在称为:直角三角形. 已知直角三角形的斜边是某个整数,并且要求另外两条边也必须是整数. 求满足这个条件的不同直角三角形的个数. [数据格式] 输入一 ...

  8. Java实现N的N次幂

    如果x的x次幂结果为10(参见[图1.png]),你能计算出x的近似值吗? 显然,这个值是介于2和3之间的一个数字. 请把x的值计算到小数后6位(四舍五入),并填写这个小数值. 注意:只填写一个小数, ...

  9. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  10. lei muban

    #include<iostream> using namespace std; template <typename T> class Operator{ public: T ...