当前位置:   article > 正文

vue面试题(全)

vue面试题

初级(简单)

1:Vue 解决了什么问题

① 虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的还是 dom,不过是换了一种方式。

② 视图、数据、结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。

组件化:把一个单页应用中的各种模块拆分到一个一个单独的组件中,便于开发,以及后期的维护

2:Vue 的生命周期(11 个钩子函数)

⑴beforeCreate(创建前):在此生命周期函数执行的时候,data 和 methods 中的数据都还没有初始化。

⑵created(创建后):在此生命周期函数中,data 和 methods 都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作。

⑶beforeMount(载入前):在此生命周期函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。

⑷mounted(载入后):此时页面和内存中都是最新的数据,这个钩子函数是最早可以操作 dom 节点的方法。

⑸beforeUpdate(更新前):此时页面中显示的数据还是旧的,但是 data 中的数据是最新的,且页面并未和最新的数据同步。

⑹Updated(更新后):此时页面显示数据和最新的 data 数据同步。

beforeDestroy(销毁前):当执行该生命周期函数的时候,实例身上所有的 data,所有的 methods 以及过滤器…等都处于可用状态,并没有真正执行销毁。

⑻destroyed(销毁后):此时组件以及被完全销毁,实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。

//下面两个钩子函数一般配合使用

⑼activated(组件激活时):和上面的 beforeDestroy 和 destroyed 用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy 和 destroyed 的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候

⑽deactivated(组件未激活时):实例没有被激活时。

⑾errorCaptured(错误调用):当捕获一个来自后代组件的错误时被调用

注意:

父子组件生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

3:watch、computed 和 methods 的区别

methods 方法:在重新渲染的时候每次都会被重新的调用;

computed是依赖已有的变量来计算一个目标变量,大多数情况都是多个变量凑在一起计算出一个变量,并且computed具有缓存机制,依赖值不变的情况下其会直接读取缓存进行复用,computed不能进行异步操作

watch是监听某一个变量的变化,并执行相应的回调函数,通常是一个变量的变化决定多个变量的变化,watch可以进行异步操作

.简单记就是:一般情况下computed是多对一,watch是一对多

4:Vue.js 的特点

简洁:页面由 HTML 模板+Json 数据+Vue 实例组成

数据驱动:自动计算属性和追踪依赖的模板表达式

组件化:用可复用、解耦的组件来构造页面

轻量:代码量小,不依赖其他库

快速:精确有效批量 DOM 更新

模板友好:可通过 npm,bower 等多种方式安装,很容易融入

5:插槽的理解

插槽用于决定将所携带的内容,插入到子组件指定的某个位置,但内容必须在父组件中子组件的标签内定义,在子组件中用标签接收。slot 是组件内部的占位符。

6:vue-router 有哪几种导航钩子

① 全局导航钩子:一般用来判断权限,以及页面丢失时需要执行的操作;

beforeEach()每次路由进入之前执行的函数。

afterEach()每次路由进入之后执行的函数。

beforeResolve()2.5 新增

② 单个路由(实例钩子):某个指定路由跳转时需要执行的逻辑。

beforeEnter()

beforeLeave()

③ 组件路由钩子:

beforeRouteEnter()

beforeRouteLeave()

beforeRouteUpdate()

7:vue 组件中的 data 为什么是一个函数

data 是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。Object 是引用数据类型,如果不用 function 返回,每个组件的 data 都是内存的同一个地址,一个数据改变了其他也改变了。

8:路由懒加载

使用原因:在单页应用中,如果没有应用懒加载,运用 webpack 打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

原理:vue 异步组件技术:异步加载,vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。

9:Vue.js 介绍

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的 API;Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。数据驱动+组件化的前端开发。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

10:请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法

assets 文件夹是放静态资源;

components 是放组件;

router 是定义路由相关的配置;

view 视图;

app.vue 是一个应用主组件;

main.js 是入口文件

11: Vue 中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。

⑴v-bind:给元素绑定属性

⑵v-on:给元素绑定事件

⑶v-html:给元素绑定数据,且该指令可以解析 html 标签

⑷v-text:给元素绑定数据,不解析标签

⑸v-model:数据双向绑定

⑹v-for:遍历数组

⑺v-if:条件渲染指令,动态在 DOM 内添加或删除 DOM 元素

⑻v-else:条件渲染指令,必须跟 v-if 成对使用

⑼v-else-if:判断多层条件,必须跟 v-if 成对使用

⑽v-cloak:解决插值闪烁问题

⑾v-once:只渲染元素或组件一次

⑿v-pre:跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度

⒀v-show:条件渲染指令,将不符合条件的数据隐藏(display:none)

13:v-for 与 v-if 的优先级

v-for 比 v-if 优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

v-if和v-for不建议用在同一标签?

在Vue2中,v-for优先级是高于v-if的,咱们来看例子

  1. <div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
  2. {
  3. {item}}
  4. </div>

上面的写法是v-for和v-if同时存在,会先把7个元素都遍历出来,然后再一个个判断是否为3,并把3给隐藏掉,这样的坏处就是,渲染了无用的3节点,增加无用的dom操作,建议使用computed来解决这个问题:

  1. <div v-for="item in list">
  2. {
  3. {item}}
  4. </div>
  5. computed() {
  6. list() {
  7. return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
  8. }
  9. }

14:Vue 怎么兼容 IE

使用 babel-polyfill 插件

15

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/132586
推荐阅读
相关标签
  

闽ICP备14008679号