vue最新面试题

淡淡的烟草味﹌ 2021-12-18 23:31 344阅读 0赞

最近在面试，总结几个重点的面试题：

一、vue父子组件之间的传值：

简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。（具体案例可以看我之前写的博客）。

二、vue生命周期函数：

beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed

ajax操作是在monted生命周期中完成的。

三、vue自定义指令：

1.创建局部指令
    var app = new Vue({
        el: '#app',
        data: {    
        },
        // 创建指令(可以多个)
        directives: {
            // 指令名称
            dir1: {
                inserted(el) {
                    // 指令中第一个参数是当前使用指令的DOM
                    console.log(el);
                    console.log(arguments);
                    // 对DOM进行操作
                    el.style.width = '200px';
                    el.style.height = '200px';
                    el.style.background = '#000';
                }
            }
        }
    })
    
    2.全局指令
    Vue.directive('dir2', {
        inserted(el) {
            console.log(el);
        }
    })
    
    3.指令的使用
    <div id="app">
        <div v-dir1></div>
        <div v-dir2></div>
    </div>

四、vue动态路由传值：

[vue动态路由配置，vue路由传参][vue_vue]动态路由：  
　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据  
　　这就要用到动态路由跟路由传参了！  
首先我们来了解下router-link这个组件：  
　　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到  
　　并且当一个导航器被激活的时候，会自动加上一个css的激活样式，可以全局在路由配置中设置linkActiveClass属性，属性名就是样式css名，一般写为active  
　　现在基本了解了router-link，先讲一下动态路由配置吧  
我们在配置路由的时候，将目标组件的路径先配置好，如：

![v2-5287122ee9e468acdff1264c39c8e837_b.jpg][]

比如多个路由都要进入List组件，这时候在配置路由路径后加个:id(id可随便取名，标识),这个属性id可以在$route.params.id中获取，例如：

![v2-3391b46e5967b7c04c847d660e87d51c_b.jpg][]

当前这个child组件要进入，以上配置的id就等于on；这时候在List组件中打印出$route.params.id就可以得到这个属性值on

![v2-d1f9d8cd6482289a9e06693910ae3021_b.jpg][]

这个时候，不同组件进入同一目标组件时就可以得到标识跟备注了，也可以利用这个来传递一些正常的参数  
接着往下看，带参数的路由，跟获取传来的参数值  
当router-link被激活点击时，会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj  
传参数的时候，我们就写成对象的形式，用到v-bind的js表达式

![v2-a26687231750587def2c955426165620_b.jpg][]

此时整个的理解可以为：我是child组件过来的，而且我还带来了我的名字，我叫child  
在List组件当中去获取这个参数值跟id的值

![v2-97a86bfbcd6f3b28cbb89b88bd2fa71b_b.jpg][]

![v2-73bb0ee3f937262b76684e06bb022de1_b.jpg][]

如果是不同的组件过来的，可以设置不同的id值，只要在目标组件获取属性id的值就可以了，参数就利用query.属性值来获取

五、axios和ajax的区别：

1.区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

**Ajax：**  
Ajax 即“**A***synchronous* **J***avascript* ***A**nd* **X***ML*”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。  
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。  
Ajax 是一种用于创建快速动态网页的技术。  
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。  
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。  
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

$.ajax({
                url: 'http://jsonplaceholder.typicode.com/users',
                type: 'get',
                dataType: 'json',
                data: {
                    //'a': 1,
                    //'b': 2,
                },
                success: function (response) {
                    console.log(response)；
                }
            })

**axios：**  
用于浏览器和node.js的基于Promise的HTTP客户端  
1. 从浏览器制作XMLHttpRequests  
2. 让HTTP从node.js的请求  
3. 支持Promise API  
4. 拦截请求和响应  
5. 转换请求和响应数据  
6. 取消请求  
7. 自动转换为JSON数据  
8. 客户端支持防止XSRF

axios({
                url: 'http://jsonplaceholder.typicode.com/users',
                method: 'get',
                responseType: 'json', // 默认的
                data: {
                    //'a': 1,
                    //'b': 2,
                }
            }).then(function (response) {
                console.log(response);
                console.log(response.data);
            }).catch(function (error) {
                console.log(error);
            })

2.优缺点： ajax： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务 axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。

六、vuex实现购物车原理：

[https://blog.csdn.net/qq\_37481512/article/details/92831940][https_blog.csdn.net_qq_37481512_article_details_92831940]

七、vue路由钩子函数：

**路由的钩子函数总结有6个**

**全局的路由钩子函数：beforeEach、afterEach**

**单个的路由钩子函数：beforeEnter**

**组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate**

**模块一：全局导航钩子函数**

**1、vue router.beforeEach（全局前置守卫）**

**beforeEach的钩子函数，它是一个全局的before 钩子函数，**

**（beforeEach）意思是在 每次每一个路由改变的时候都得执行一遍。**

它的三个参数：

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) \*\*\***必须调用**

next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）

next('/') 或者 next(\{ path: '/' \}): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

**应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！！**

router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {
            //判断该路由是否需要登录权限
            if (cookies('token')) {
                //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页
                next()//不要在next里面加"path:/",会陷入死循环
            }
            else {
                next({
                    path: '/login',
                    query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由
                })
            }
        }
        else {
            next()
        }
    })

**2、vue router.afterEach（全局后置守卫）**

**router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后**

**模块二：路由独享的守卫(路由内钩子)**

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]

这些守卫与全局前置守卫的方法参数是一样的。

**模块三：组件内的守卫(组件内钩子)**

**1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave**

const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
    
      }

八、vue解决跨域问题的方法：

[https://www.cnblogs.com/ldlx-mars/p/7816316.html][https_www.cnblogs.com_ldlx-mars_p_7816316.html]

九、什么方法可以替换v-model?

![preview][]

![preview][preview 1]

<template>
      <div id="listBox">
        <p>v-model动态监听输入的值{
       {value1}} <br /></p> 
        <p>使用v-model实现的监听：<input type="text" v-model="value1" ><br/></p>
        <p>v-bind:value和v-on:input动态监听输入的值{
       {value2}} <br /></p>
        <p>模拟v-model的方法：
          <input type="text" v-bind:value="value2" v-on:input="value2 = $event.target.value" >
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: "listBox",
      data() {
        return {
          value1:'1111',
          value2:'2222',
        };
      },
      methods: {
         
      },
      mounted () {
    
      }
    };
    </script>
    <style>
    #listBox {
      width: 900px;
      margin: 0 auto;
     
    }
     p{
       text-align: left;
        line-height:30px;
        font-weight: bold;
        font-size: 18px;
      }
      p input{
        border:solid 1px #ddd;
        line-height:30px
      }
    </style>

十、如何给vue自定义组件添加点击事件？

需要在@click后面加上.native,官方对于native的解释为：

.native -——监听组件根元素的原生事件

正确写法：

<my-button  @click.native="alert1()" names="删除" v-bind:item2="btdata"></my-button>

[vue_vue]: http://link.zhihu.com/?target=https%3A//www.cnblogs.com/zlbrother/p/7707221.html
[v2-5287122ee9e468acdff1264c39c8e837_b.jpg]: /images/20211219/39d3a6dc1ee848c6b30c080874282f42.png
[v2-3391b46e5967b7c04c847d660e87d51c_b.jpg]: /images/20211219/7aebafa06c6a49a08250fad2c7ea77d0.png
[v2-d1f9d8cd6482289a9e06693910ae3021_b.jpg]: /images/20211219/36741d3e4c7043a78821bf22923e770e.png
[v2-a26687231750587def2c955426165620_b.jpg]: /images/20211219/7d1b70b9d4c9442f9e5d3e605a639038.png
[v2-97a86bfbcd6f3b28cbb89b88bd2fa71b_b.jpg]: /images/20211219/71938e1c37534fce96f2d2087b7fb2d9.png
[v2-73bb0ee3f937262b76684e06bb022de1_b.jpg]: /images/20211219/22a01a59cee24ccaa128cc77761cd5eb.png
[https_blog.csdn.net_qq_37481512_article_details_92831940]: https://blog.csdn.net/qq_37481512/article/details/92831940
[https_www.cnblogs.com_ldlx-mars_p_7816316.html]: https://www.cnblogs.com/ldlx-mars/p/7816316.html
[preview]: /images/20211219/f1b1b6510262445cbfba3b7bb00c5182.png
[preview 1]: /images/20211219/3d0a4c70468b4e448fe1701c4b61cfa8.png