vue 请求在子组件加载后了_从零单排vue第九课--Vue实例及生命周期

前期回顾

上一节课我们重点学习了子组件如何与父组件通信，我们使用$emit方法在子组件中触发一个事件，然后在父组件中接收它。本节课我们来深入了解下vue实例以及它的生命周期是怎么样的？

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:

1var vm = new Vue({
2    //选项
3})

当创建Vue实例时，你可以传入一个选项对象，例如前面我们使用过的el、template、data、methods、props。其中el、template这个选项叫做DOM选项，data、methods、props叫做数据选项，完整的选项列表可以查看vue官方的API文档。

数据和方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

如下最简单的hello world代码：

 1<!DOCTYPE html>2<html lang="en">3    <head>4        <meta charset="utf-8">5        <title>Vue实例</title>6    <script src="vue.js"></script>7    </head>8    <body>9    <div id="app">
10        {{msg}}
11    </div>
12      <script>
13        var vm = new Vue({
14          el: '#app',
15          data: {
16            msg: 'hello world'
17          }
18        })
19      </script>
20    </body>
21</html>

我们在浏览器控制台中输入vm，可以看到所有有关该实例的信息，包括实例属性和方法。

也可以在vue官方API文档中看到有关用法。

实例的生命周期

生命周期是一个很有用的概念。在vue中，实例被创建出来，从创建到销毁，会经历一系列过程，在这个过程中，系统会调用相应的生命周期钩子。生命周期钩子是在Vue实例生命周期的某个阶段执行的已定义方法。从初始化开始到它被破坏时，实例都会遵循不同的生命阶段。

可以看到，vue实例在每个重要阶段都有自己的生命周期钩子。可能很多人会问，这些函数方法有什么用呢？

我们在开发一个项目的时候，第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子，我们可以利用这些钩子完成一些初始化的工作，利用这些钩子我们就能控制页面加载的过程，能帮助我们形成更好的功能逻辑。

生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用。 mounted : 挂载元素，获取到DOM节点。updated : 如果对数据统一处理，在这里写上相应函数。 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom。

欢迎关注微信公众号:从零单排vue，获取最新的vue学习资源。公众号学习资源正在建设中，请耐心等待。