Vue 实例的生命周期

概念：从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。
生命周期的四个阶段：create（初始）、mount（加载）、update（更新）、destroy（销毁）

Vue 实例的生命周期

常用方法：

created：Vue 实例创建完成后调用，处理数据。
mounted：挂载完成（完成渲染页面），el 挂载到实例上后调用，监听页面显示。
beforeDestroy：即将销毁，实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

var app = new Vue({
  el: '#app',
  data: {
    msg: 'ok'
  },
  methods: {
    show() {
      console.log('执行了show方法')
    }
  },

  /**
   * 生命周期函数--创建完成：Vue 实例创建完成后调用
   */
  created: function() {
    // data 和 methods 都已经被初始化好了！处理数据...
    console.log(this.msg) // ok
  },

  /**
   * 生命周期函数--挂载完成/完成渲染页面，el 挂载到实例上后调用
   */
  mouted: function() {
    console.log(this.$el) // <div id="app"></div>
  },

  /**
   * 生命周期函数--重新渲染页面（data发生改变时执行）
   */
  update: function() {
    // data数据改变，页面重新渲染的原理：
    // data中的数据发生改变时，会先根据data中的最新的数据，在内存中重新渲染出一份最新的虚拟DOM（即内存中的DOM树），当最新的内存DOM树被更新之后，会把最新的内存DOM树重新渲染到真实的页面中去。这样就完成了数据从 data（Model层）到 view（视图层）的更新。
  },

  /**
   * 生命周期函数--即将销毁
   */
  beforeDestroy: function() {
    
  }
})

网络请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现数据的请求
常用请求：get、post、jsonp

JSONP：JSON with Padding，JSONP 和 < script> 标签有关，最大的优势就是实现异步跨域的作用。JSONP 就是利用 <script> 的 src 属性，实现跨域的功能。

JSONP的实现原理：

由于浏览器的安全性限制，不允许AJAX访问跨域请求（协议不同/域名不同/端口号不同的接口，浏览器认为这种访问不安全）。
可以通过动态创建script标签的形式（<script>标签跨域），把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）

具体实现过程：

先在客户端定义一个回调方法，预定义对数据的操作；
再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

1.模拟前端发送 JSONP 请求：

<script>
// 2.返回请求数据
function complete (data) {
  // 接收返回的 json 对象
  console.log(data);
};
</script>
 
<!-- 1.发送 JSONP 请求（支持跨域请求） -->
<!-- 指定请求地址、回调函数名称 和 回调函数的参数 -->
<script src='http://www.girls.hustonline.net?callback=complete&name=jimmy&age=18'></script>

下面模拟一下实在的JSONP请求。上面是直接将script写死在html内部，这样造成的结果可能会阻塞页面的加载

var sendJSONP = function(url, callbackName) {
    var script = docuemnt.createELement('script');
    script.src = `${url}&callback=${callbackName}`;
    document.head.appendChild(script);
}
// 2.请求完成的回调函数
var complete = function(data){
  // 接收返回的 json 对象
  console.log(data);
}
// 1.发送 JSONP 请求
sendJSONP('http://girls.hustonline.net?name=jimmy&age=18', 'complete');

使用 jquery 发送 JSONP 请求

$.getJSON("http://girls.hustonline.net?callback=?", function(result){
  console.log(result);
});
// 这里，我们需要关注一下url里面中callback=?里的?的内涵。jquery使用自动生成数的方式，省去了我们给回调命名的困扰。 其实，最后?会被一串字符代替，比如：json23153123。这个就代表你的回到函数名。不过，还是推荐使用$.ajax，因为你一不小心就有可能忘掉最后的?。

使用 $.ajax 发送 JSONP 请求

$.ajax({
    url: 'http://girls.hustonline.net?name=jimmy',
    dataType: 'jsonp',
    success: function(result) {
       console.log(result);
    }
});

2.模拟服务器端执行一个JSONP的函数：

const util = require('util'),
    http = require('http'),
    url = require('url');
let data = JSON.stringify({
    message:"I've already received"
});
http.createServer(function(req, res) {
    req = url.parse(req.url, true);
    if (!req.query.callback) res.end();
    console.log(`name is  ${req.query.name} and his age is ${req.query.age}`);
    res.writeHead(200, { 'Content-Type': 'application/javascript' })
    res.end(req.query.callback + "('" + data + "')")
}).listen(80)