2023最新版vue面试题1（持续更新中）

1、JS 中判断数据类型的方法有几种?

最常见的判断方法: typeof
判断已知对象类型的方法:instanceof
根据对象的 constructor判断: constructor
无敌万能的方法:jquery.type()

2、vue与angular的区别?

vue 仅仅是 mvvm 中的 view 层，只是一个如jquery 般的工具库，而不是框架，而 angular 而是 mvvm 框架。
vue 的双向邦定是基于 ES5 中的 getter/setter 来实现的，而 angular 而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue 则不需要。因此vue 在性能上更高效，但是代价是对于 ie9 以下的浏览器无法支持。
vue 需要提供一个 el 对象进行实例化，后续的所有作用范围也是在 el 对象之下,而 angular 而是整个 html 页面。一个页面,可以有多个 vue 实例,而 angular好像不是这么玩的。
vue 真的很容易上手，学习成本相对低，不过可以参考的资料不是很丰富，官方文档比较简单，缺少全面的使用案例。高级的用法，需要自己去研究源码，至少目前是这样。

3、说说你对 angular 脏检查理解?

在 angular 中你无法判断你的数据是否做了更改，所以它设置了一些条件，当你触发这些条件之后,它就执行一个检测来遍历所有的数据，对比你更改的地方，然后执行变化。
这个检查很不科学。而且效率不高，有很多多余的地方，所以官方称为脏检查。

4、active-class 是哪个组件的属性?

vue-router 模块的 router-link 组件

5、嵌套路由怎么定义?

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口

<div id="app">
    <!-- router-view 路由出口，路由匹配到的组件将渲染在这里 -->
    <router-view> </router-view>
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入两个组件
import home from "./home.vue"
import game from "./game.vue'
//定义路由

const routes = [
    { path:"/",redirect:"/home",//重定向,指向了 home 组件
    {
        path: "/home", component: home,
            children:[
                {path:"/home/game", component:game}
            ]
     }
]

//创建路由实例
const router = new VueRouter({froutes})
new Vue({
    el:'#app'
    data:{
    },
    methods:{
    },
    router
})

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面否则子路由无法显示。

<template>
    <div>
        <h3>首页</h3>
        <router-link to="/home/game">
            <button>显示<tton>
        </router-link>
        <router-view></router-view>
    </div>
</template>

game.vue

<template>
    <h3>游戏</h3>
</template>

6、怎么定义 vue-router 的动态路由? 怎么获取传过来的动态参数?

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。
使用 router 对象的 params.id。

7、vue-router 有哪几种导航钩子?

三种

第一种: 是全局导航钩子: router.beforeEach(to,from,next)，作用: 跳转前进行判断拦截。
第二种: 组件内的钩子
第三种:单独路由独享组件

8、scss 是什么? 在 vue.cli 中的安装使用步骤是? 有哪几大特性?

css 的预编译

使用步骤:

第一步: 用npm 下三个loader (sass-loader、css-loader、node-sass)
第二步: 在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss
第三步: 还是在同一个文件，配置一个 module 属性
第四步: 然后在组件的 style 标签加上 lang 属性，例如: lang=”scss”

有哪几大特性:

可以用变量，例如 ($变量名称=值)
可以用混合器，例如 ()
可以嵌套

9、mint-ui 是什么? 怎么使用? 说出至少三个组件使用方法?

基于 vue 的前端组件库。npm 安装，然后import 样式和js，vue.use (mintUi)全局引入。在单个组件局部引入: import {Toast} from ‘mint-ui’
组件一: Toast(‘登录成功’)
组件二: mint-header
组件三: mint-swiper

10.v-model是什么? 怎么使用? vue 中标签怎么绑定事件?

可以实现双向绑定，指令(v-class、v-for、v-if、v-show、V-on)。vue 的 model层的 data 属性。绑定事件: <input @click=doLog()/>

11、iframe 的优缺点?

iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

优点:

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
方便制作导航栏

缺点:

iframe 会阻塞主页面的 Onload 事件
即时内容为空，加载也需要时间
没有语意

12、简述一下 Sass、Less，且说明区别?

他们是动态的样式语言，是 CSS 预处理器,CSS 上的一种抽象层。他们是一种特殊的语法/语言而编译成 CSS。

变量符不一样，less 是@，而 Sass 是$;

Sass 支持条件语句，可以使用 if{}else{},for{}循环等等。而 Less 不支持;

Sass 是基于 Ruby 的,是在服务端处理的,而 Less 是需要引入 less.js 来处理 Less代码输出 Css 到浏览器。

13、axios 是什么? 怎么使用? 描述使用它实现登录功能的流程?

请求后台资源的模块。npm install axios -S 装好，然后发送的是跨域，需在配置文件中 config/index.js 进行设置。后台如果是 Tp5 则定义一个资源路由。js 中使用import 进来，然后.get 或.post。返回在.then 函数中如果成功，失败则是在.catch 函数中