前端学习文档

# Vue面试题

# 什么是 MVVM，与 MVC 有什么区别

MVVM和MVC都是一种设计思想，主要就是MVC中的Controller演变成ViewModel,，MVVM主要通过数据来显示视图层而不是操作节点，解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度慢，影响用户体验问题。主要用于数据操作比较多的场景。 场景：数据操作比较多的场景，更加便捷

地址

# SPA单页面的理解及优缺点

SPA (single-page application) 仅在Web页面初始化时就加载相应的HTML、Javascript和CSS.

一旦页面加载完毕,SPA不会因为用户的操作而进行页面的重新加载或跳转; 取而代之的是利用路由机制实现HTML内容的变化,UI与用户的交互,避免页面的重新加载

优点：

  • 用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重新渲染；
  • SPA相对对服务器压力小
  • 前后端职责分离，前端进行交互逻辑，后端处理数据处理

缺点：

  • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

# 怎样理解单向数据流

这个概念出现在组件通信。 父组件是通过props把数据传递到子组件的，但是这个prop只能由父组件修改,子组件是不能修改的 子组件想修改时,只能通过$emit派发一个自定义事件,父组件接收后,由父组件修改.

# 生命周期

# 在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

  • 能更快获取到服务端数据，减少页面 loading 时间；
  • ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

# v-show 和 v-if的区别

  1. v-show 是 css切换 是display block/none的切换, 而 v-if是完整的销毁和重新创建
  2. 使用频繁切换用v-show

# 计算属性和watch的区别

computed: 计算属性,依赖其他属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值才会重新计算

watch: 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

# 组件中data为什么是函数

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

因为组件是用来复用的,js里对象是引用关系,这样作用域没有隔离,而new Vue的实例,是不会被复用的,因此不存在引用对象的问题

# v-model 的原理？

# 组件之间的通信

  1. 父子 props/event $parent/$children ref provide/inject
  2. 兄弟 EventBus vuex
  3. 跨级 EventBus vuex provide inject

# Vue2.x双向绑定原理

# nextTick()

# vue-router有哪几种导航钩子

  1. 全局导航钩子：router.beforeEach(to,from,next) 作用：跳转前进行拦截判断
  2. 组件内的钩子
  3. 单独路由独享组件

# 的作用和使用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染

其有以下特性：

  • 一般结合路由和动态组件一起使用，用于缓存组件；
  • 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
  • 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

# Vue中key值的作用

← 面试题 →