vue（2-2）

这篇文章主要介绍了vue实例的生命周期， vue-resource实现三种方式的数据请求和JSONP的实现原理。

1. vue实例的生命周期

1.1 概念

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：
- 创建期间的生命周期函数：
  - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  - created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
  - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
  - beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  - updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
  - beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  - destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1.2 实现举例

html

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
</div>

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {
        msg: 'ok'
    },
    methods: {
        show() {
            console.log('执行了show方法')
        }
    },
    beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
    },
    created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
    },
    beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
    },
    mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
    },
    
    // 接下来的是运行中的两个事件
    beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
    },
    updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
    }
});

2. vue-resource 实现 get, post, jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
常见的数据请求类型？ get post jsonp
测试的URL请求资源地址：
- get请求地址： http://vue.studyit.io/api/getlunbo
- post请求地址：http://vue.studyit.io/api/post
- jsonp请求地址：http://vue.studyit.io/api/jsonp

2.1 `vue-resource`实现请求实例

引入vue-resource

1
2
3

<script src="./lib/vue-2.4.0.js"></script>
<!-- 注意：vue-resource 依赖于 Vue ，它是在Vue中添加了一个 Vue.$http 对象-->
<script src="./lib/vue-resource-1.3.4.js"></script>

请求文件

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>

创建vue请求实例

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        getInfo() { // 发起get请求
            //  当发起get请求之后， 通过 .then 来设置成功的回调函数
            this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
                // 通过 result.body 拿到服务器返回的成功的数据
                // console.log(result.body)
            })
        },
        postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
            //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
            //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
            this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true 		 }).then(result => {
                console.log(result.body)
            })
        },
        jsonpInfo() { // 发起JSONP 请求
            this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                console.log(result.body)
            })
        }
    }
});

3. JSONP实现原理

3.1 概念

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

3.2 通过 `Node.js` 来手动实现一个`JSONP`的请求例子

客户端

<!--定义一个回调方法，把这个回调的 方法名 通过URL传参提交给服务器-->
<script>
    function showData(data) {
        console.log(data)
    }
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showData"></script>

服务端app.js

// 导入 http 内置模块
const http = require('http')
// 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
const urlModule = require('url')

// 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {

  // const url = req.url
  const { pathname: url, query } = urlModule.parse(req.url, true)

  if (url === '/getscript') {
    // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
    // var scriptStr = 'show()'

    var data = {
      name: 'jerry',
      age: 18,
      gender: 'girl'
    }

    var scriptStr = `${query.callback}(${JSON.stringify(data)})`
    // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
    res.end(scriptStr)
  } else {
    res.end('404 Not Find')
  }
})

// 指定端口号并启动服务器监听
server.listen(3000, function () {
  console.log('server listen at 3000')
})

vue（2-2）

1. vue实例的生命周期

1.1 概念

1.2 实现举例

2. vue-resource 实现 get, post, jsonp请求

2.1 vue-resource实现请求实例

3. JSONP实现原理

3.1 概念

3.2 通过 Node.js 来手动实现一个JSONP的请求例子

2.1 `vue-resource`实现请求实例

3.2 通过 `Node.js` 来手动实现一个`JSONP`的请求例子