vue面试题（一）

尤雨溪不懂VUE
204 阅读7分钟

00 什么是Vue以及Vue的特点

vue是一套用于构建用户界面的渐进式（自底向上逐层应用）js框架

  1. 组件化开发
  2. 无需操作DOM
  3. 使用虚拟DOM和diff算法复用DOM节点

01 SPA及其优缺点

SPA:signal page application，单一页面应用。

一旦页面加载完成，不会因为用户在浏览器上的操作而进行跳转、刷新，取而代之的是利用路由机制实现的HTML内容的变换、UI和用户的交互，避免页面的重新加载。

数据需要通过ajax请求获取。

优点：

  1. 避免不必要的跳转和重复渲染，提高了用户的体验，减轻了服务器的压力。
  2. 前后端分离，使架构更加清晰。

缺点：

  1. 初次加载耗时长（可以通过按需加载来避免）。
  2. 浏览器的前进后退不可以使用，要自己建立堆栈来进行页面切换。
  3. SEO难度大。因为就一个页面。

02 v-if和v-show的区别

v-if是真正的条件渲染，不停地的进行销毁和重建，但若初始条件为假时，就什么也不做。

v-show无论初始渲染条件是否为真，都进行渲染，只是使用“display”属性来控制是否在页面上显示

03 class 和 style如何动态绑定

都可以通过对象和数组来绑定。

但是class里的对象写法使用于：绑定多个样式，样式个数和样式名字都不确定； 数组写法适用于：绑定多个样式，个数和名字都确定，但用不用不确定。

04 怎样理解Vue的单项数据流

父级的prop的更新会向下流动到子级的prop里，但是反过来不可以， 若想反过来，只能通过$emit派发一个自定义事件，父组件接到后由父组件修改

05 computed和watch的区别和应用场景

computed是计算属性，其结果具有缓存属性，只有它依赖的值发生变化，才会在下次获得computed的值的时候重新计算computed。一般在进行数值计算并且依赖他的结果时使用。

watch更多是“监视作用”，一般在异步执行或者开销较大时使用。

06 生命周期

  1. beforeCreate： 组件实例创建之初，组件属性生效之前。
  2. created： 组件实例已经创建完成，属性也绑定完成，但是真实DOM还没有生成，$el还不可用。
  3. beforeMount： 挂载开始之前被调用，相关render函数被首次调用。
  4. mounted： el被新创建的$el替换。在这个阶段才可以访问操作DOM。
  5. beforeUpdate： 组件更新前调用。
  6. update： 组件更新后调用。
  7. activated： keep-alive专属，组件被激活时调用。
  8. deactivated： keep-alive专属，组件被移除时调用。
  9. beforeDestory：组件销毁前调用。
  10. destoryed： 组件销毁后调用。

07 Vue父子组件钩子函数执行顺序

  • 加载渲染过程
    • 父组件bc=》父组件c=》父组件bm=》子组件bc=》子组件c=》子组件bm=》子组件m=》父组件m
  • 子组件更新过程
    • 父组件bu=》子组件bu=》子组件u=》父组件u
  • 父组件更新过程
    • 父组件bu=》父组件u
  • 销毁过程
    • 父组件bd=》子组件bd=》子组件d=》父组件d

08 为什么组件里的data必须是函数，而vue实例里的data可以用对象表示？

组件是为了复用，如果不将data写成函数的形式，那么没有作用域的隔离，子组件的data值会相互影响。

vue实例是不会被复用的，因此不存在引用对象的问题。

09 谈谈keep-alive的理解

本质是vue的一个内置组件，可以使被包含的组件保持状态，避免重新渲染。

当被包含的组件被激活时，触发activated钩子函数；当组件移除时，触发deactivated钩子

10 组件间通信的几种方式：

  1. Vuex
  • 适用于父子、兄弟、隔代组件之间通信
  • Vuex是vue程序的状态管理模式，每一个Vuex应用的核心就是store。
  • store本质上是一个仓库，包含着应用的大部分state（状态）
  1. props
  • 适用于父子组件之间通信
  • 可以在父组件中写函数，传递给子组件，子组件传参调用。通过这样来达到子组件给父组件传值的效果
  1. 消息订阅与发布
  • 借助第三方库（例如pubsub.js），可以在任意框架里实现消息订阅与发布
  1. 自定义事件

在父组件中定义事件，在子组件中通过$emit来触发。

  1. provide/inject

11 什么是MVVM模型

  • M(model，模型)：数据模型，后端提供的API接口
  • V(view，视图)：视图层，也就是用户界面,狭义的前端
  • VM(视图模型)：Vue实例

12 数据代理

通过vm对象来代理data对象中属性的操作，可以更加方便的操作data。

基本原理：通过Object.defineProperty()将data对象中的所有属性添加到vm身上；为每一个添加到vm上的属性增加getter和setter方法；通过getter和setter来操作data对应的属性。

13 Vue中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据产生新的虚拟DOM，之后新旧对比决定是否渲染。

  1. 旧虚拟DOM中有与新虚拟DOM相同的key

    • 若内容没变，则使用之前的真实DOM
    • 若内容改变，则渲染新的真实DOM并替换掉之前的

  2. 没有相同的key

    • 创建新的真实DOM并渲染

14 使用index作为key可能引发的问题

如果对数据进行逆序添加、逆序删除等破坏原本顺序的操作，就会产生不必要的更新。同时在进行这样的操作时，如果页面有输入类DOM，会产生错误的更新（例如input输入框）。

如果不进行破坏顺序的操作，仅仅是渲染，用index作为key是没有问题的。

一般开发时的key是通过npm下载库自动生成的（uuid，nanoid）

15 什么是ref，以及它和id的区别

ref：用来给元素或者组件注册引用信息

对于传统的HTML标签，ref和id属性的作用基本一样；对于组件标签，ref输出组件的实例对象，id输出组件的HTML结构 （通过console.log(this.$refs.sch)输出）

16 mixin

mixin 混入 混合 ：复用配置

当混入里的数据和组件本身的数据发生冲突，以本身为主（data，methods）

但是生命周期钩子除外，发生冲突就两者都执行，先执行mixin的钩子，再执行组件本身的钩子

17 plugin

plugin 插件

可以在里面的install函数里写全局过滤器，混入，自定义指令，以及给vue原型添加方法等

18 $nextTick

正常函数里面修改data的语句很多，但不会每修改一次数据页面就重新渲染一次，而是会等函数执行完成后刷新一次页面。

而有些语句希望在页面渲染后执行，那么就把它包裹在this.$nextTick(function(){})里面。

$nextTick：在下一次DOM更新结束后返回其回调。

19 同源策略和跨域

同源策略：协议名，域名，端口号这三个必须一致

跨域：违背了同源策略（注意可以发送请求，服务器也返回了数据，但是接收不到）

解决跨域：

  • cors：后端配置（最优解）
  • jsonp：通过script标签的src属性在访问外部资源时不受同源策略的影响来配置，前端配置
  • 配置代理服务器：配置一个和当前端口号一致的代理服务器来当中介，即满足同源策略中的端口号。此时浏览器向配置的代理服务器发送请求，后代理服务器向目标服务器发送请求，服务器之前的请求不必遵循同源策略。

20 路由

路由就是一组“key-value”对应关系，多个路由需要经过路由器的管理。

路由组件之间的跳转就是旧组件销毁与新组件挂载。

每个组件的vue组件实例对象（vc）都增加了两个新属性： route(路由本身的路径，参数等信息),route(路由本身的路径，参数等信息),router(路由器，有各种方法)

21 router-link标签的replace属性

作用：控制路由跳转时操纵浏览器历史记录的模式。

浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前历史记录。路由跳转时默认是push。

路由的历史记录本身的数据结构是栈，push时将每一个地址压进栈中，回退时再读取出来。replace时直接替换掉栈顶的地址。

22 路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
  3. hash模式：
    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式：
    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

23 对vue项目的优化

  • v-if和v-show区分使用
  • 为v-for增加key
  • computed和watch区分使用
  • 事件及时销毁
  • 图片懒加载
  • 路由懒加载
  • 第三方插件、组件库按需引入
  • SSR：服务器端渲染：页面上的内容是通过服务器渲染的，浏览器直接展示服务器返回的HTML就行了。
  • 浏览器缓存
  • CDN的使用（Content Delivery Network，内容分发网络，这是一项缩短时延的技术。当用户访问网站时，将其指向最近的缓存服务器）

24 虚拟DOM的原理及其优缺点

  1. 原理

    • 用JS对象模拟真实DOM，对真实DOM进行抽象
    • diff算法：比较两棵虚拟DOM树的差异
    • pach算法：将两个虚拟DOM对象的差异应用到真实DOM树

  2. 优点

    • 保证性能下限
    • 无需手动操作DOM
    • 跨平台（例如服务器端渲染（SSR））

  3. 缺点

    • 无法进行极致优化

25 Vue是如何实现双向数据绑定的

  1. 实现一个监听器，对数据对象进行遍历，利用Object.defineProperty() 对属性都加上 setter 和 getter。
  2. 修改属性时，触发setter。
  3. 读取属性时，触发getter。

自己实现： 在表单类标签上同时绑定v-bind:value='value'和@input事件（e.target.value）

avatar
文章
阅读
粉丝