前端面试汇总VUE(一）

因为对vue用的比较多，所以面试投的都是vue相关的岗位，下面是在面试中遇到的常见的vue问题。

1.Vue 不同环境配置不同的接口地址；

我们在项目中，前端请求访问的地址如果有跨域，我们会在config-->index.js中配置代理。

这样前端请求就可以使用'/api/接口名称'，但是在生产环境下，我们不需要接口请求前面加'/api'，所以就需要判断开发环境和生产环境。
1)
    config -> dev.env.js  添加开发接口地址
    config -> prod.env.js  添加生产环境的地址
2)
    在封装axios时，添加判断：
    if (location.hostname == '正式的域名') { 
        baseUrl = '正式地址'
    } else { //测试环境
        baseUrl = '测试地址'
    }

    axios.defaults.baseURL = baseUrl
    

2.用户未登录进入该url的登录拦截逻辑：

1.首先在定义路由的时候需要添加自定义字段(requireAuth)字段可以自己设置名称，判断该路由的访问是否需要登录，如果用户已经登录，顺利进入该路由，否则就进入登录页。在路由管理页面添加meta，在meta字段里设置。
    meta:{requireAuth:true}// 添加该字段，true表示进入这个路由是需要登录的
2.定义完路由后，利用vue-router的钩子函数beforeEach对路由进行判断；
router.beforeEach((to, from, next) => { 
    if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 
        if (store.state.token) { // 通过vuex state获取当前的token是否存在 
            next();
        } else { 
            next({ 
                path: '/login', 
                query: {
                    redirect: to.fullPath
                } // 将跳转的路由path作为参数，登录成功后跳转到该路由 
            }) 
        } 
        } else { 
            next(); 
        }
   })

3.axios是什么？怎么使用？

axios是一个基于promise的HTTP请求库，简单地说就是可以发送get、post请求，可以用在浏览器和node.js中。
axios的特性：
    1)可以在浏览器中发送XMLHttpRequests
    2)可以在node.js中发送http请求
    3)支持Promise API
    4)拦截请求和响应
    5)转换请求数据和响应数据
    6)能够取消请求
    7)自动转换json数据
    8)客户端支持保护安全免受 XSRF 攻击

4.VueX是什么？哪种场景能使用它？

1）VueX是一个专门为vue构建的状态集管理。主要为了解决组件之间状态共享的问题。强调的是集中式管理。主要是便于维护、便于解耦，不是所有项目都适合vuex，如果不是构建大型项目，会使代码变得繁琐多余。
2)VueX的核心
    state：存放数据
    mutations：变更状态（同步的）
    getters：
    actions：调用mutations，更改状态的。（可以异步）
    modules
    

5.路由的钩子函数

路由的钩子函数主要是用来拦截导航，让它完成跳转和取消
主要分为全局和局部
全局的：
    1）beferEach
    2）afetrEach
    

6.vue的生命周期详解（必看）

vue生命周期分为四个阶段
creating
mounting
updating
destroying

beforeCreated：el和data都未初始化（可以加loading）
Created：data数据初始化，el未初始化（结束loading）
beforeMount：完成el和data初始化（虚拟DOM）
mounted：挂载完成，真实DOM渲染完成（发起请求，拿数据，渲染DOM）
beforeUpdate：组件更新前的函数，数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前
update：组件更新之后执行的函数，vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后
beforeDestroy：组件销毁之前调用，在这一步，实例仍然可以完全可用（可在此处清除定时器，清除事件绑定）
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

7.路由懒加载

1)vue异步组件技术,vue-router配置路由，使用路由的异步组件技术，可以实现按需加载。但是这种情况下，一个组件生成一个js文件。
{
    path:'/home',
    name:'home'.
    component:resolve => require(['@/components/home'],resolve)
}
2)路由懒加载（使用import）
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
{
    path:'/home',
    name:'home'.
    component:Foo
}

在build目录下找到webpack.prod.conf.js文件，将output修改为
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),//文件格式，文件名.文件哈希
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')//文件切割后的文件名称。
    这里的name对应的就是路由中引入文件时候的webpackChunkName
}
3)webpack提供的require.ensure技术，也可以按需加载，多个路由指定相同的chunkName，会合并打包成一个js文件。
{
    path:'/home',
    name:'home'.
    component:resolve=>require.ensure([],() => resolve(require('../components/PromiseDemo')),home)
}

8.封装组件过程

1）新建组件，组件包含template、script、style
2）父组件中，使用import引入组件 import 组建名称 form 组件路径
3）父组件中，components注册组件 components：{ 组件名称 }

9.vue路由传参方式

<div v-for="article in articles" @click="getDescribe(article.id)"></div>
1）getDescribe(id){
    this.$router.push({
        path:'/describe/${id}'
    })
}
对应的路由配置：
{
 path: '/describe/:id',
 name: 'Describe',
 component: Describe
}
获取参数：this.$route.params.id;

2)getDescribe(id){
    this.$router.push({
        name:'/describe',
        params:{
            id:id
        }
    })
}
获取参数：this.$route.params.id

3)getDescribe(id){
    this.$router.push({
        path:'/describe',
        query:{
            id:id
        }
    })
}
获取参数：this.$route.query.id;    //query方式参数会显示在url的后面

10.插槽的作用？

**匿名插槽：**
    子组件：
    <template>
        <h3>test-slot</h3>
        //父组件里的span会替换掉slot所以这里的123是看不见的
        //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来          
        <slot>123</slot> 
    </template>
    父组件：
    <template>
      <div id="app">
        <test-slot>
          <span>我是父组件里的文字，但是我要被放到子组件里</span>
        </test-slot>
     </div> 
   </template> 
**渲染结果：**
    test-slot
    我是父组件里的文字，但是我要被放到子组件里

**多个插槽也叫具名插槽：**
子组件：
    <template>
        <h3>test-slot</h3>
        //父组件里的span会替换掉slot所以这里的123是看不见的
        //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来          
        <slot name='header'>123</slot> 
        <slot>123</slot> 
        <slot name='footer'>123</slot> 
    </template>
父组件：
    <template>
        <h3>多个具名插槽</h3>
        <div slot='header'>头部内容</div>
        <div>内容部分</div>
        <div slot='footer'>底部内容</div>
    </template>
**渲染结果：**
    多个具名插槽
    头部内容
    内容部分
    底部内容

**作用域插槽：** 
作用域插槽是一种特殊类型的插槽，子组件的值传到父组件使用
子组件：
    子组件props里接收一个父组件传递的数组，在作用域插槽slot里边，绑定数组的属性。
    <template>
      <div class="hello">
        <slot :cname="items[2].cname"></slot> 
        <slot :addr="items[2].addr"></slot> 
        <slot age="18"></slot> 
      </div>
    </template>

    <script>
        export default {
        
          data () {
            return {
              num:100
            }  
          },
          props:['items'],
          methods:{
            
          },
          created(){
            console.log('items',this.$props.items);
          }
        }
    </script>

父组件：
    在test-slot子组件标签上通过:item='items'给子组件传递数组，通过slot-scope='props'获取子组件作用域插槽所有的属性值
    <template>
      <div id="app">
        <h2>app</h2>
         <test-slot :items="items">
           <template slot-scope="props">
             <span>{{ props.addr }}</span>
             <span>{{ props.cname }}</span>
             <span>{{ props.age }}</span>
           </template>
         </test-slot>
      </div>
    </template>
    
    <script>
    import testSlot from './components/testSlot.vue'
    export default {
      data (){
        return {
          items:[
            { text:'文字1' , cname:'tom' , addr:'usa' },
            { text:'文字2' , cname:'wangwu' , addr:'uk' },
            { text:'文字3' , cname:'zhangsan' , addr:'un' }
          ]
        }
      },
      methods:{
        
      },
      components:{
        testSlot
      }
    }
    </script>
**渲染结果：**
zhangsan un 18