一般情况下，我们使用vue时，去服务器请求数据，通常是这么写的

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      postsList: []
    },
    methods: {
      fetchData () {
        axios.get('/api/posts')
          .then(function(response) {
            vm.postsList = response.data.postsList;
            vm.postsList.forEach((element) => element.url = '/posts/show?id=' + element._id);
          })
      }
    },
  });
  
  vm.fetchData();
</script>

看上去似乎也没啥问题，上面的例子 能保证fetchData的callback回来后，vue已经虚拟化完了。
假设 我们的代码 在vue结构外面，就很难保证整个业务逻辑的完整性。如果vue对HTML没有完成虚拟化，
更新数据操作DOM都是徒劳的。甚至可能因为找不到对应绑定的节点而报错。
因此保证在vue将HTML虚拟化之后 初始化数据操作dom才是安全可靠的。

事实上vue对象从创建到销毁有一个生命周期

vue生命周期

上图很清晰的表明了vue在生命周期的各个阶段做的事情，并且提供了生命周期的几个回调函数

• beforeCreate 创建之前：已经完成了 初始化事件和生命周期
• created 创建完成：已经完成了 初始化注册和响应
• beforeMount 挂载之前：已经完成了模板渲染
• mounted :挂载之后：已完成HTML虚拟化，创建了el节点 可以操作DOM了
• beforeDestroy ：摧毁之前：整个vue都处在实时监控空渲染和更新
• destroyed: 已摧毁，已经摧毁了观察者，子元素和事件监听

所以，在完成HTML渲染之后，初始化请求数据是安全可靠的，也就是把vue初始化请求的数据放在mounted的钩子函数中比较好。
所以，上面代码改进如下：

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      postsList: []
    },
mounted:function() {
        axios.get('/api/posts')
          .then(function(response) {
            vm.postsList = response.data.postsList;
            vm.postsList.forEach((element) => element.url = '/posts/show?id=' + element._id);
          })
      }
  });

</script>

需要明确的是：

• vue提供了生命周期的钩子函数，其值就是一个函数。既然是钩子函数，在该触发的时候，会自动调用，不需要我们手动调用。
• 如果需要执行多个函数，没问题呀，函数中是可以调用其他函数，也是可以定义函数的。
• 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a)
  或 vm.$watch('a', newValue => this.myMethod())
  。因为箭头函数是和父级上下文绑定在一起的，this
  不会是如你所预期的 Vue 实例，且 this.a
  或 this.myMethod
  也会是未定义的。