1、每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

2、本篇将介绍组件创建期间的4个钩子函数，分别为：

　　①：beforeCreate，这是我们遇到的第一个生命周期函数，其在实例未被创建出来之前执行。此时Vue实例中的date和methods属性数据还未被初始化。

　　②：created，其执行的时候，Vue实例中的date和methods属性数据已被初始化完成。

　　③：beforeMount，其执行的时候，模板已经在内存中编辑完成了，但是还未渲染在页面中。

　　④：mounted，其执行的时候，内存中的模板已经挂载到了页面中，用户可以在浏览器中看到渲染好的页面了。

　　下面我们来逐个验证一下。

3、beforeCreate

<body>

    <div id="app"></div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : '生命周期'

            },

            methods : {

                show(){

                    console.log('show函数被执行');

                }

            },

            beforeCreate(){

                console.log(this.msg);

                this.show();

            }

        });

    </script>

执行结果如下：

从浏览器控制台可以看出，data里的msg值为undefined，methods里的show函数找不到，说明钩子函数beforeCreate执行的时候，data和methods还未被初始化。

4、created

<body>

    <div id="app"></div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : '生命周期'

            },

            methods : {

                show(){

                    console.log('show函数被执行');

                }

            },

            created(){

                console.log(this.msg);

                this.show();

            }

        });

    </script>

</body>

运行结果如下：

从结果可以看出data里msg值已经获取，methods里的show函数也被执行，说明钩子函数created执行的时候，data和methods已被初始化。

5、beforeMount

<body>

    <div id="app">

        {{ msg }}

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : '生命周期'

            },

            methods : {},

            beforeMount(){

               console.log(document.getElementById("app").innerText);

            }

        });

    </script>

</body>

运行结果如下：

这里我们在钩子函数beforeMount里输出了div的文本内容，从结果可以看出页面展示了正确内容，但是控制台只是输出了原样字符串，说明执行此函数的时候，Vue模板数据并没有渲染到页面中。

6、mounted

<body>

    <div id="app">

        {{ msg }}

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el : "#app",

            data : {

                msg : '生命周期'

            },

            methods : {},

            mounted(){

               console.log(document.getElementById("app").innerText);

            }

        });

    </script>

</body>

运行结果如下：

控制台输出的内容和页面展示的内容一致，说明钩子函数mounted执行的时候，Vue模板数据已经渲染到了页面中。至此，Vue实例已经初始化完毕，即组件创建阶段完成，即将进入运行阶段。

本篇只是介绍了组件创建期间的4个钩子函数，下篇会继续介绍Vue周期中组件运行阶段的钩子函数。

每天进步一点点！

Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数的更多相关文章

  1. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  2. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  3. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  4. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  5. Vue学习之路第二篇：插值表达式

    要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...

  6. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  7. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  8. Vue学习之路第十五篇：v-if和v-show指令

    1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...

  9. Vue学习之路第三篇：插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

随机推荐

  1. 027依据前序遍历和中序遍历，重建二叉树(keep it up)

    剑指offer中题目:http://ac.jobdu.com/problem.php?pid=1385 题目描写叙述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.如果输入的前序遍历和中 ...

  2. luogu1273 有限电视网

    题目大意 有一棵有根树,每个结点有一个收益,每条边有一个花费.如果要选择一个叶子结点,则根节点到该叶子结点的路径上的所有结点都必须被选择.求当总收益大于等于总花费的情况下,最多能选择多少个叶子结点. ...

  3. android.os.Process.killProcess(android.os.Process.myPid())与Activity生命周期的影响

    如果通过finish方法结束了一个Activity,那么根据Activity的生命周期,则会自动调用Activity的销毁方法onDestory(),但是在项目中遇到这样的一个问题,就是​Activi ...

  4. 支撑百亿级应用的 NewSQL

    支撑百亿级应用的 NewSQL https://zhuanlan.zhihu.com/newsql/ 项目背景 初次接触 TiDB,是通过同程网首席架构师王晓波先生的分享,当时同程网正在使开发和数据库 ...

  5. B1232 [Usaco2008Nov]安慰奶牛cheer 最小生成树

    %%%小詹太巨啦!!!我就想直接最小生成树之后建树跑dfs,然后写跪了...然后看小詹博客之后恍然大悟,原来直接把边权改为w * 2 + 两边点权值就行了. 但是还是不对,为什么呢?原来我们起点走了三 ...

  6. B3680 吊打xxx 物理？？？

    看到一道很有意思的题,这个题简直有毒,是一道物理题...好像得用模拟退火...但显然我太弱了不会模拟退火,只能用正交分解暴力... 每次沿着力的方向走一定的距离,假如转头了,则走的步长就减小一点. 不 ...

  7. 第14课 SourceTree程序操作介绍

    http://www.atlassian.com/software/sourcetree/overview https://www.microsoft.com/net/framework/versio ...

  8. C语言程序读写文件（文件内存一个十进制数，每读一次数值加一）

    1.问题:C语言程序实现读写一个txt文件,txt文件中存储一个十进制数.每读一次该数值加一. 2.实现:新建一个文件夹,在该文件夹中建一个outputFileName.txt文件.内容是:1,再在该 ...

  9. css 引入方式

    css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CS ...

  10. .net中的WebForm引人MVC的控制器

    当下.net中比较火的模式MVC模式,说实话对于菜鸟的我还没有遇到一个比较健全的MVC模式的项目也是比较遗憾.偶然间在网上看到WebForm实现MVC中的模式(主要是控制器...)就学习了一波,下面是 ...