脚本宝典收集整理的这篇文章主要介绍了Vue-Cli 异步加载数据的一些注意点，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

刚开始学vue的时候没有使用脚手架，现在用脚手架写法有点不同，今天遇到的问题是使用豆瓣api异步加载数据的时候，会一直在命令行上报错，基本上错误都是xxx 未定义。

例子

<template>
<div v-if="moviesData">

    <!-- 正在上映的电影-北京 -->
    <h1>{{ moviesData.title }}</h1>
    
</div>
</template>

<script>
import jsonp from 'jsonp'    // 一个jsonp插件 npm install jsonp --save

export default {
  data(){
    return {
      moviesData: null        // 如果不事先给一个默认值的data，就会报 xxx is not define
    }
  },
  
  // 生命周期函数
  created(){

    // 发送请求
    jsonp('https://api.douban.com/v2/movie/in_theaters', null, (err, data)=>{
      this.moviesData = data;
    });
  }
}
</script>

在发送异步请求的时候要注意两个点：

1. 数据的初始值，我这里是给null作为初始值。
2. 判断数据是否存在，在htML中，我用v-if判断moviesData是否存在，可以确保只有在数据存在的时候才会渲染。

脚本宝典总结

以上是脚本宝典为你收集整理的Vue-Cli 异步加载数据的一些注意点全部内容，希望文章能够帮你解决Vue-Cli 异步加载数据的一些注意点所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。