vue - 前端面试题

1,active-class 是哪个组件的属性?嵌套路由怎么定义?
答:vue-router 模块的 router-link 组件。

2,怎么定义 vue-router 的动态路由?怎么获取传过来的动态参数?
答:在路由的 path 属性上加上 【/:id】。获取:router.params.id。

3,vue-router 有哪几种导航钩子?
答:(1)全局导航钩子:beforeEach()、afterEach()
(2)路由独享组件:beforeEnter()
(3)组件内的钩子:beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave()

4,scss 是什么?使用步骤是?有那几大特性?
(1)预处理 css,把 css 当成函数编写
(2)1,安装 sass:npm install sass-loader css-loader node-sass –save-dev;
2,在 build 文件夹下 webpack.base.conf.js 文件,在module 中添加规则

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

3,在组件中的style 标签上加上【lang=”scss”】
(3)sass 的几大特性
1,变量($变量名称=值);
2,嵌套
3,混合
4,导入

5,mint-ui是什么?怎么使用?至少说出三个组件的使用方法?
答:(1)基于 vue 的前端组件库。npm 安装,然后 import 样式和js,Vue.use(mintUI)全局引入。
(2)在单个组件内部引入:import { Toast } from ‘mint-ui’
(3)组件1:Toast(‘登录成功’);
组件2:mint-header
组件3:mint-swiper

6,v-model 是什么?怎么使用?vue中标签怎么绑定事件?
答:是可以实现双向数据绑定的指令(v-class、v-for 、v-if、v-show、v-on)
<div @click='someFunc'>

7,axios 是什么?怎么使用?描述使用它实现登录功能的流程?
答:(1)axios 是请求后台资源的模块
(2)npm install axios, import axios from ‘axios’,然后 axios.post(‘/login’, {params: {ID: 123465}},then(res=> {}).catch(err=> {}))

9,vue 组件化的理解
组件的基本构成分别为:样式结构,行为逻辑,数据。web 中的组件其实就是页面的一部分,每个组件都会提供一些对外的接口,允许使用者使用和设置参数属性,可以将不同功能的组件结合在一起,快速的构建一个符合需求的应用

10,Vue 路由的理解
首先Vue的单页面应用是基于路由和组件的,路由用于设定访问的路径,并将路径和组件映射起来。传统的页面应用,是通过超链接来实现页面的切换和跳转。在vue-router是通过路径之间的切换,也就是组件的切换来实现的。

11,你对 Vue 钩子函数的理解
vue-router 的导航钩子主要用于拦截导航,让他完成跳转或取消。

扫描二维码关注公众号,回复: 2745554 查看本文章

12,如何让 css 只在当前页面起作用
<style scoped></style>

13,created 和 mounted 的区别
created 是实例创建完成之后的钩子函数;$el属性不可见为undefined
mounted 是将编译好的 HTML 挂在到页面完成后执行的钩子函数,在整个生命周期中只执行一次,;$el 已创建,同时 DOM 已生成。

14,created 和 mounted 分别什么时候用?
只有 ajax 数据请求时,使用 created ;如果有依赖DOM的情况,就放在 mounted中**

15,vue 和 angular 分别采用什么技术实现双向数据绑定?
【Angular】 采用”脏值检测“的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生变化,有变化进行处理,可能进一步引发其他数据变化,所以这个过程可能会重复几次,一直到没有数据发生变化后,将变更的数据发送到视图,更新页面展示。如果是手动对 ViewModel 的数据进行变更,为确保变更同步到视图,需要手动触发一次“脏值检测”。
【VueJS】 则使用 ES5 提供的 Object.defineProperty 方法,可以精确的将变更的数据发送给绑定的视图,而不是对所有数据都进行一次检测。

16,v-if 和 v-show 的区别
v-if 是直接销毁和重建 DOM 来达到显示和隐藏的目的,有更高的切换开销;
v-show 是修改元素的 display 属性让其显示或隐藏,有更高的初始渲染开销。
因此,如果需要频繁的切换,则选择 v-show;如果运行时条件不太可能改变,则选择v-if。

17,<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive>包裹动态组件时,会缓存不活动的组件实例,主要用于保留组建状态或避免重新渲染。

18,Vue 中引入组件的步骤
1,使用 import … from … 的方式引入,或者使用 commonJS 的 require()方法引入
2,对组件进行注册

Vue.component('my-component', {
    template: "<div>a costom component</div>"
})

3,使用组件 <my-component></my-component>

19,请简述 vuex 的原理和使用方法
一个实例化的 Vue.Store 由 state、mutations、actions 三部分组成。
state保存着共有数据。
修改 state 中的数据,有且仅能通过mutations 中的方法,并且 mutations中的方法必须是同步到的。
如果需要异步的方法,需要写在 actions 中,通过 commit 到 mutations 中的方法修改 state 中的数据。

20,active-class 是哪个组件的属性?
vue-router 模块的 router-link 组件

21,怎样定义 vue-router 动态路由,怎样获取传递过来的动态参数
(1)修改路由:在对应路由的 path 属性上添加 【/:id】
(2)传递参数:<router-link to="{path: 'detail', params: { id: 1 }}">
(3)获取参数:在目标组件下,通过路由对象的 $route.params 进行接收

22,vue-router 有哪几种导航钩子
(1)全局钩子:beforeEach、afterEach
(2)路由独享钩子:beforeEnter
(3)组件内部的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
to:要进入的路由对象,到哪里去
from:正要离开的路由对象,从哪里来
next:用来决定跳转或取消导航

23,vue-router 是什么?它有那些组件?
vue的路由插件,它有 router-link、router-view

24,请说出 vue-cli 项目中 src 目录下每个文件夹和文件的用法?
(1)assets:存放静态资源
(2)compontents:存放组件
(3)router:定义路由相关配置
(4)view:视图
(5)app.vue:应用的主组件
(6)main.js:程序的入口文件

25,什么是 vue 的生命周期?它分为几个阶段?它的作用是什么?
(1)vue 的生命周期指 vue 实例从创建到销毁的过程。也就是从开始创建、初始化数据、编译模板、挂在DOM、更新DOM、卸载的一系列过程
(2)8个阶段:创建前/后、挂载前/后、更新前/后、卸载前/后
(3)可以让我们更好的控制 vue 实例,在对应的阶段做对应的事情

26,简述一下,每个周期具体适合哪些场景
(1)beforeCreate:loading 事件,实例创建之前触发
(2)created:结束loading 事件、获取异步请求
(3)mounted:挂载DOM 元素,获取DOM节点
(4)beforeDestroy:做一个是否离开当前页的提示框

27,第一次加载页面,会触发那几个钩子?
beforeCreat、created、beforeMount、mounted

28,DOM 渲染在哪个周期中就已经完成?
mounted

29,computed 和 methods 比较
计算属性是基于他们的依赖进行缓存的,只有当依赖发生改变时才会重新求值。如果依赖没有改变,多次访问该计算属性,都会返回之前的计算结果,不必再次执行函数。如果不希望有缓存,请用方法替代。

30,computed 和 watch 比较
举个例子:a + b = c
watch(命令式且重复的)

var vm = new Vue({
    el: '#demo',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    watch: {
        a: function(val){
            this.c = val + this.b
        },
        b: function(val) {
            this.c = this.a + val
        }
    }
})

computed

var vm = new Vue({
    el: '#demo',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    computed: {
        c: function(){
            return this.a + this.b
        }
    }
})

31,请说下具体使用 vue 的理解(使用 vue 的好处)
(1)使用 vue 不必担心由布局变化引起的 js 代码重写问题,因为它是数据驱动双向绑定的,底层是基于 ES5 的 Object.defineProperty()定义数据的get、set 函数实现的
(2)组件化的开发,让项目的可扩展性、可移植性更好,代码的重用性更高。局部组件更新界面,让用户体验更快速省时
(3)js 代码的规范,可以提高团队合作开发的效率。

32,jquery 和 vue 的区别
(1)jquery 是通过 选择器($)选取 DOM 对象,对其进行赋值,取值,数据绑定等操作。其实和原生的 js 的区别在于可以更方便的选取和操作 DOM,而数据和界面实在一起的。
(2)vue 则是通过 vue 对象,将数据和视图分离开来,对数据的操作不依赖 DOM。

33,Vue.nextTick(callback)是什么?
如果在数据改变之后立即调用 Vue.nextTick(callback) ,则回调函数 callback 会在 DOM 更新之后立即调用

34,解释 mvc 和 mvvm 模式
(1)mvc
视图(view):用户界面
控制器(controller):业务逻辑
模型(model):数据保存
view 传送指令到 controller
controller 完成业务逻辑,要求 model 改变状态
model 将新的数据发送到 view,用户得到反馈

(2)mvvm:由 Model、View、ViewModel 三部分组成
Model:代表数据模型,也可以在 model 中定义数据修改和操作的业务逻辑
View:代表 UI 组件,负责将数据模型转化成 UI 展示出来
ViewModel:是一个同步 view 和 model 的对象
ViewModel 通过双向数据绑定,将 View 和 Model 连接到一起,所以 View 数据的变化会同步到 Model 中,Model 的数据变化也会立即反应到 View 上,而 View 和 Model 之间的同步工作完全是自动的,无需认为干预,因此开发者只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态之间的同步问题,复杂的数据状态维护,完全由 MVVM 来统一管理。

35,Vue 中操作 DOM

<div ref='demo'></div>
//...
// 获取DOM
this.$refs.demo.style.color = "red"

猜你喜欢

转载自blog.csdn.net/M_wolf/article/details/81364148