0生命周期和钩子函数的一些理解,深入理解Vue父子组件生命周期执行顺序及钩子函数

0生命周期和钩子函数的一些理解,深入理解Vue父子组件生命周期执行顺序及钩子函数。先附一张官方网站络的vue实例的生命周期图,每种Vue实例在被成立的时候都亟需经过一层层的早先化进度,举例供给安装数据监听,编写翻译模板,将实例挂载到DOM并在数据变动时更新DOM等。同一时候在这几个进度中也会运营一些称呼生命周期钩子的函数(回调函数),那给了用户在差异等第增添本人代码的时机。

先附一张官方网站络的vue实例的生命周期图,各种Vue实例在被成立的时候都需求通过一名目许多的初步化进程,譬喻需求设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同临时候在那些进程中也会运作一些称为生命周期钩子的函数(回调函数),那给了用户在不相同阶段增添自个儿代码的空子。

  • 概述
    vue用了少时,对钩子函数和生命周期只是停留在简约的应用,不明了为何,接下去将更加深刻的摸底一下,话异常少说,走起
  • Vue的生命周期简单介绍

    图片 1

    生命周期.png

前言:

钩子就象是是把人的降生到已经逝去分成一个个等级,你一定是在诞生阶段起名字,而不会在成年或然回老家的级差去起名字。或然说你想在落地阶段去约炮,也是相当的。组件也是千篇一律,各类阶段它的里边构造是分化样的。所以一般特定的钩子做一定的事,比如ajax获取数据就能够在mounted阶段。

1、vue的性命周期图

1、vue的生命周期图

 

图片 2

在vue实例的万事生命周期的一一阶段,会提供分化的钩函数以供大家开展差异的操作。先列出vue官方网址络对一一钩子函数的详细分析。

生命周期钩子    

详细
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
activated keep-alive 组件激活时调用。
deactivated keep-alive 组件停用时调用。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
![](https://upload-images.jianshu.io/upload_images/7960526-58e39d2363ffd3f5.png)

lifecycle.png

一、vue生命周期简要介绍

作者们从上海体育场地能够很领悟的来看以往vue2.0都不外乎了哪些生命周期的函数了,总计一下,对官方文书档案的那张图简化一下,就获得了那张图。

图片 3

2、实操 

下边大家在实质上的代码实行进度中精晓父亲和儿子组件生命周期创制进度以及钩子函数试行的实时气象变化。

测量试验基于上面包车型地铁代码,引进vue.js文件后就能够实行。(展开页面后,再按二回刷新会活动进入debugger状态)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>   
<body>
<div id="app">
    <p>{{message}}</p>
    <keep-alive>
        <my-components :msg="msg1" v-if="show"></my-components>
    </keep-alive>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    var child = {
        template: '<div>from child: {{childMsg}}</div>',
        props: ['msg'],
        data: function() {
            return {
                childMsg: 'child'
            }   
        },
        beforeCreate: function () {
            debugger;
        },
        created: function () {
            debugger;
        },
        beforeMount: function () {
            debugger;
        },
        mounted: function () {
            debugger;
        },
        deactivated: function(){
            alert("keepAlive停用");
        },
        activated: function () {
            console.log('component activated');
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
    };
    var vm = new Vue({
        el: '#app',
        data: {
                message: 'father',
                msg1: "hello",
                show: true
            },
        beforeCreate: function () {
            debugger;
        },
        created: function () {
            debugger;
        },
        beforeMount: function () {
            debugger;
        },
        mounted: function () {
            debugger;    
        },
        beforeUpdate: function () {
            alert("页面视图更新前");

        },
        updated: function () {
            alert("页面视图更新后");
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'my-components': child
        }
    });
</script>
</html>
  • 实则呢,生命周期可以省略分为8有的
    beforeCreate(创建前),
    created(创建后),
    beforeMount(载入前),
    mounted(载入后),
    beforeUpdate(更新前),
    updated(更新后),
    beforeDestroy(销毁前),
    destroyed(销毁后)
  • 话十分的少说 上代码

二、生命周期商量

对于进行顺序和如哪天候施行,看上面图基本有个精通了。下边大家将组成代码去拜见钩子函数的实践。

<!DOCTYPE html>
<html>
<head>
    <title>钩子函数</title>
    <script type="text/javascript" src="vue_2.2.4.js"></script>
<body>

<div id="app">
    <p>{{ message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        },
        methods:{
            change() {
                this.message = 'Datura is me';
            },
            destroy() {
                vm.$destroy();
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

在vue实例的凡事生命周期的逐个阶段,会提供区别的钩子函数以供咱们举办区别的操作。先列出vue官英特网对各类钩子函数的详尽解析。

3.1、生命周期调节和测量检验

第一大家创设了几个Vue实例vm,将其挂载到页面中id为“app”的因素上。

3.1.1、根组件的beforeCreate阶段

图片 4

可以看到,在调用beforeCreate()函数时,只进行了有些必需的初始化操作(比如有个别大局的布置和根实例的有个别天性开头化),此时data属性为undefined,未有可供操作的数量。

3.1.2、根组件的Created阶段

图片 5

调用Created()函数,在这一步,实例已到位以下的安插:数据代理和动态数据绑定(data
observer),属性和办法的演算, watch/event
事件回调。但是,挂载阶段还没初叶,$el 属性方今不可知。

3.1.3、根组件的beforeMount阶段

图片 6

图片 7

在调用boforeMount()函数前先是会咬定目的是还是不是有el选项。假诺部分话就雄起雌伏向下编写翻译,若无el选项,则甘休编译,也就代表结束了生命周期,直到在该vue实例上调用vm.$mount(el)

在那一个事例中,我们有el成分,因而会调用boforeMount()函数,此时曾经起来试行模板剖判函数,但还尚无将$el成分挂载页面,页面视图因而也未更新。在标红处,还是{{message}},这里就是利用的 Virtual DOM(设想Dom)技能,先把坑占住了。到末端mounted挂载的时候再把值渲染进去。

3.1.4、子组件的beforeCreate、Created、beforeMount、Mounted阶段

在父组件试行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段,那个品级和父组件像样,按下不表。beforeMount阶段后,实施的是Mounted阶段,该阶段时子组件已经挂载到父组件上,何况父组件随之挂载到页面中。

由下图可以知道,在beforeMount阶段之后、Mounted阶段在此以前,数据已经被加载到视图上了,即$el成分被挂载到页面时接触了视图的更新。

图片 8

3.1.5、子组件的activated阶段

 大家开采在子父组件全体挂载到页面之后被触发。那是因为子组件my-components被<keep-alive>
包裹,随$el的挂载被触发。借使实组件未有被<keep-alive>包裹,那么该阶段将不会被触发。

图片 9

3.1.6、父组件的mounted阶段

mounted实行时:此时el已经渲染完毕并挂载到实例上。

时至后天,从Vue实例的早先化到将新的沙盘挂载到页面上的级差已经完成,退出debugger。上边大家来看一下deactivated、beforeUpdate、updated、beforeDestroy、destroyed钩子函数。

1. create 和 mounted

beforecreated:el 和 data 并没有伊始化
created:达成了 data 数据的初叶化,el未有
beforeMount:完成了 el 和 data 初始化
mounted :完结挂载

除此以外在标红处,大家能觉察el依然 {{message}},这里正是选用的 Virtual
DOM(虚构Dom)技巧,先把坑占住了。到末端mounted挂载的时候再把值渲染进去。

生命周期钩子

3.2、deactivated、beforeUpdate、updated阶段

由生命周期函数可见:当数码变动后、虚构DOM渲染重新渲染页前边会触发beforeUpdate()函数,此时视图还未更动。当设想DOM渲染页面视图更新后会触发updated()函数。

图片 10

 

我们无妨更换vm.show =
false,当修改那些特性时,不独有会触发beforeUpdate、updated函数,还会触发deactivated函数(因为keep-alive
组件停用时调用)。大家无妨想转手deactivated函数会在beforeUpdate后照旧updated后调用。

我们在支配台输入vm.show =
false。得到三者的调用顺序分别为beforeUpdate、deactivated、updated。大家得以领略的是deactivated函数的触发时间是在视图更新时触发。因为当视图更新时本领驾驭keep-alive组件被停用了。

图片 11

图片 12

图片 13

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">

  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>  
2. update

小编们单击页面中的“更新数据”按键,将数据更新。上边就会观看data里的值被修改后,将会触发update的操作。

生命周期钩子    

详细
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
activated keep-alive 组件激活时调用。
deactivated keep-alive 组件停用时调用。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也

3.3、beforeDestroy和destroyed钩子函数间的生命周期

近期大家对Vue实例举行销毁,调用app.$destroy()方法就能够将其销毁,调整台测量试验如下:

 图片 14

咱俩发掘实例依旧存在,不过此时变化已经发生在了其余地点。

beforeDestroy钩子函数在实例销毁以前调用。在这一步,实例依然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue
实例提醒的装有东西都会解绑定,全部的平地风波监听器会被移除,全体的种子例也会被灭绝(也正是说子组件也会触发相应的函数)。这里的灭绝并不代表’抹去’,而是表示’解绑’。

销毁时beforeDestory函数的传递顺序为由父到子,destory的传递顺序为由子到父。

开荒浏览器调控台,会发觉

ps:注意beforeUpdate是指view层的多寡变动前,不是data中的数据变动前触发。因为Vue是数据驱动的。注意观察弹窗就便于觉察。

实例销毁后调用。调用后,Vue
实例提示的有所东西都会解绑定,全数的事件监听器会被移除,全体的种子例也会被灭绝。

4、一些使用钩子函数的主张

  • 在created钩子中得以对data数据进行操作,那年能够实行ajax央求将回来的数量赋给data。
  • 虽说updated函数会在数据变化时被触发,但却不能可信的论断是丰硕属性值被改造,所以在其实况况中用computed或match函数来监听属性的改变,并做一些别的的操作。
  • 在mounted钩子对挂载的dom实行操作,此时,DOM已经被渲染到页面上。
  • 在利用vue-router时一时供给动用<keep-alive></keep-alive>来缓存组件状态,这年created钩子就不会被重复调用了,假如大家的子组件必要在历次加载或切换状态的时候进行一些操作,能够动用activated钩子触发。
  • 有着的生命周期钩子自动绑定 this 上下文到实例中,所以不可能接纳箭头函数来定义八个生命周期方法 (举例 created: () => this.fetchTodos())。那是导致this指向父级。

beforecreate:el和data并未有起首化
created:实现了data数据的起头化,el未有
beforeMount :完毕了el和data的初阶化
mounted :实现了挂载
咱俩常常说的先挖坑,其实是vue设想dom,在mounted时才填坑的
update : 当大家选用任何办法修改了数码,vue会触发update
destroy : 使用destroy之后,dom依旧存在,可是不受vue调节了

3. destroy

销毁产生后,我们再重新更动message的值,vue不再对此动作进行响应了。不过原先生成的dom成分还设有,能够如此精通,实践了destroy操作,后续就不再受vue调节了。因为那些Vue实例已经不设有了。
大家单击页面中的“销毁”按键,将点名的Vue实例销毁。

2、实操

5、 小结

  • 加载渲染进程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

  • 子组件更新进程

父beforeUpdate->子beforeUpdate->子updated->父updated

  • 父组件更新进程

父beforeUpdate->父updated

  • 销毁进度

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

  • 大面积钩子函数的选取

三、生命周期总括

beforecreate : 举个栗子:能够在那加个loading事件
created :在那甘休loading,还做一些起头化,实现函数自实行
mounted : 在那发起后端诉求,拿回数据,协作路由钩子做一些作业
beforeDestory: 你料定删除XX吗? destoryed
:当前组件已被删去,清空相关内容

ps:正文参谋

上边大家在骨子里的代码实行进程中领略父子组件生命周期成立进程以及钩子函数试行的实时情状变化。

6、参谋文章

有关Vue.js2.0生命周期的钻研与领会

Vue2.0
索求之路——生命周期和钩子函数的有个别明白

 

PS:假如作品对你有一部分援救,款待点击推荐,您的引入是自身不住输出的重力!

beforecreate : 举个栗子:能够在那加个loading事件
created
:在那甘休loading,还做一些开端化,达成函数自实践,也得以向后台哀告数据
mounted : 在那发起后端必要,拿回数据,合营路由钩子做一些专门的职业
beforeDestory: 你承认删除XX吗?
destoryed :当前组件已被删去,清空相关内容

测量检验基于上边包车型地铁代码,引入vue.js文件后就能够进行。(展开页面后,再按壹次刷新会活动步入debugger状态)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  </style>
</head>  
<body>
<div id="app">
  <p>{{message}}</p>
  <keep-alive>
    <my-components :msg="msg1" v-if="show"></my-components>
  </keep-alive>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  var child = {
    template: '<div>from child: {{childMsg}}</div>',
    props: ['msg'],
    data: function() {
      return {
        childMsg: 'child'
      }  
    },
    beforeCreate: function () {
      debugger;
    },
    created: function () {
      debugger;
    },
    beforeMount: function () {
      debugger;
    },
    mounted: function () {
      debugger;
    },
    deactivated: function(){
      alert("keepAlive停用");
    },
    activated: function () {
      console.log('component activated');
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
  };
  var vm = new Vue({
    el: '#app',
    data: {
        message: 'father',
        msg1: "hello",
        show: true
      },
    beforeCreate: function () {
      debugger;
    },
    created: function () {
      debugger;
    },
    beforeMount: function () {
      debugger;
    },
    mounted: function () {
      debugger;  
    },
    beforeUpdate: function () {
      alert("页面视图更新前");

    },
    updated: function () {
      alert("页面视图更新后");
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    components: {
      'my-components': child
    }
  });
</script>
</html>

3.1、生命周期调节和测验

率先大家创立了二个Vue实例vm,将其挂载到页面中id为“app”的成分上。

3.1.1、根组件的beforeCreate阶段

图片 15

能够看来,在调用beforeCreate()函数时,只进行了一些要求的开端化操作(比方有个别大局的布局和根实例的局地性质起初化),此时data属性为undefined,未有可供操作的数目。

相关文章