vue生命周期与vue请求

一、生命周期

1、什么是vue的生命周期？

        从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

2、vue生命周期钩子函数

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

        生命周期函数=生命周期事件=生命周期钩子

3、生命周期函数都有哪些？

（1）beforeCreate()

        beforeCreate() { }是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。我们一般用它来进行页面重定向。

注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化

（2）created()

        created() { } 是我们遇到的第二个生命周期函数， 在 created 中，data 和 methods 都已经被初始化好了！ 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。

        根据它的特性，我们一般用它来进行接口请求。

（3）beforeMount()

        beforeMount() 是我们遇到的第3个生命周期函数，此时模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。

（4）mounted()

        mounted()是我们遇到的第4个生命周期函数，它表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。一般在此完成需要依赖DOM的操作。

注意： mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。

        接下来的是运行中的两个事件。

（5）beforeUpdate()

        beforeUpdate() 这时候，表示我们的界面还没有被更新，但是数据已经被更新了。

即当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步

（6） updated()

        updated()  事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

（7）beforeDestroy()

        beforeDestroy() 事件执行时就是组件销毁之前，一般用于清除计时器，监听等。

（8）destroy()

        destroy()事件在组件销毁后触发，此时浏览器已经关闭。

二、vue请求

1、vue-resource的使用

        引入：

<script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.min.js"></script>

1. 直接在页面中引入script标签，引入vue-resource的脚本文件；
2. 注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件
3. 在created（）函数中书写

（1）GET请求

 // get 方式获取数据
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then((res) => {
  console.log(res);
})

（2）POST请求

//post方式请求数据
var url = 'http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded 若不指定也可不写
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
  console.log(res.body);
});
}

2、axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

书写：

在created中书写

（1）GET请求

axios.get('https://www.runoob.com/try/ajax/json_demo.json').then(
response => (this.info = response)
)

（2）POST请求

axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php'{}).then(
response => (this.info = response)
)

其中请求体写在post的第二个参数中