vue懒加载、axios在脚手架相关面试题

在实际开发中，路由的component除了首页需要加载的页面以外，其他页面组件的引入都需要懒加载，这是vue性能优化的的非常重要手段之一

组件也能懒加载

在父组件里，在父组件里面

components:{
     子组件标签名:()=>import('子组件路径')
   }这就是子组件的懒加载 用到的时候再加载

只要有import引入组件的地方都可以写成这种形式，重点就是路由懒加载

具体代码

在父组件中不在开始进行引入import，在子页面的路由对象中的component中引入
        // import ShopCar from '@/views/ShopCar.vue'

    ,{
        path: '/shopcar',
        name:'ShopCar',
        component:()=>import('@/views/ShopCar.vue')
      }

在脚手架中使用axios模块：

1、先 npm i axios --save

         --save 是把当前下载的模块登记到package.json的依赖里面(要不然的话别人拿到之后下载依赖没有vueRtouer就报错)

2 、import Axios from 'axios'

3 、Axios(options)直接调用

简单实用axios:

        在main.js引入axios 并且把axios绑定给Vue的原型里面

        use.prototype.$axios=Axios//为什么不用use方法

                因为axios没有提供vue.use的配合  vue.use需要这个模块本身的配合

                $axios叫什么名字都可以 但是潜规则大家一般都叫做$axios

<button @click="getData">点我请求接口数据</button>

methods:{
    getData(){      
      this.$axios({
        url:'https://mock.yufenghen.cn/vueserver/bluebird/bootcamplist.php'
            请求方式：
                method:'get',
                method:'post'
      }).then(data=>{
        console.log(data.data);
      })
    }
  }