生命周期

1、什么是生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程,这个过程就叫做生命周期。

生命周期图示:
13987241-a9969bea45b5a089.png

2、模拟实例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>{{msg}}</div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>
</body>
</html>
运行结果为:
13997532-15ecb162c60dbc73.png

13997532-8b45841f8208f897.png

13997532-24995585550711b0.png

13997532-52c3506d7a21896a.png

13997532-a9e737fe90695921.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue源码探究-生命周期 本篇代码位于vue/src/core/instance/lifecycle.js 初步探...
    喜欢唱歌的小狮子Shio阅读 4,545评论 0 51
  • 最近北方多雨,刚立秋的日子,空气里多了几分凉意,行人匆匆,我在温暖的地方看大雨淹没车和人的新闻。 昨日下午,因为头...
    和风与你阅读 3,873评论 2 1
  • 又是一个月圆之夜,今夕不同往昔,但却有了同样的伤感惆怅。 我与伙伴走回居所的路上,路过天桥,天桥上三三两两,稀稀疏...
    心语晴愿阅读 4,322评论 0 0
  • 四下里雾雨相濡以沫足够纤细 我只身在这灰色柔纱中辗转游离 秋色凄风已渐老去心中仍有余悸 恐眷恋恒在不绊不羁 并不凛...
    靠劲儿阅读 1,917评论 0 0
  • 艺术是什么? 表情达意,表达情感与想法! 什么样的艺术是好艺术? 1,独特的情意 2,匹配的语言 3,真诚的表达 ...
    唐森取经阅读 3,759评论 0 2