[JavaScript知识库]vue 相关的面试题

1.对MVVM的理解

MVVM事 model-view-viewModel 的缩写

• model：表示数据，也可以在model中定义数据修改和操作的业务逻辑

• view：代表UI组件，她复杂讲数据模型转化成UI展示出来

• viewModel：监听模型数据的改变和控制视图行为，处理用户交互，简单理解就是一个同步view 和model的对象，连接model和view

在MVVM框架下，view和model之间并没有直接的联系，而是通过viewModel进行交互，model和viewmodel之间的交互式相互，是双向的，因此view数据的变化也会同步到model中，而model数据的变化也会立即反应到view中

viewModel 通过双向数据绑定吧view层和model层连接起来，而view 和model 之间的同步工作完全是自动的，无需认为干涉，因此开发中只需要关注业务逻辑，不需要手动操作DOM。

2.vue双向数据绑定的原理

vue实现数据双向绑定的主要是 采用 数据劫持结合发布者-订阅模式的方式

通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时候发布消息给订阅者，触发相应监听回调。

vue的数据双向绑定 讲MVVM作为数据绑定的入口，整合Observer ，Compile 和Watcher 三者

• 通过Observer来监听自己model的数据变化

• 通过Compile来解析编译模版指令（vue中用来解析{{}}）

• 最后利用watcher搭起observer和compile之间的通信桥梁，达到数据变化 ====》 视图更新，视图变化 === 》数据model变更的双向绑定效果

3.vue组件之间的参数传递

• 父组件 传递数据给 子组件

  • 即父组件通过属性的方式向子组件传值

  • 子组件通过props来接收

• 子组件 传递数据给 父组件 (通过$emit )

  • 在父组件中 定义绑定 handleChange 事件

  • 子组件绑定一个事件，通过this.$emit() 来触发父组件中绑定的handleChange 事件

• 子组件 传递数据给 父组件 (通过回调函数)

  • 先在父组件中定义一个callback函数，并把callback函数传递给子组件

  • 在子组件中接收，并执行callback 函数，把需要传递的数据当成callback的实参传递

• 子组件 传递数据给 父组件（通过 $parent/$children或者$ref访问组件实例）

  • 通过$ref 来访问子组件

  • 通过$children来调用子组件的方法

• 非父子组件之间的数据传递（兄弟组件传值）

  • 可以通过 eventBus，就是创建一个事件中心，相当于中转站，可以用它来接收传递事件和接收事件

  • vuex 状态管理

4.v-if 和 v-show的区别

• v-show 是css display 属性的切换，而v-if是完整的销毁和重新创建

• 当频繁切换的时候 使用 v-show，运用较少的时候 使用v-if

5.什么是生命周期

vue的实例 从创建到 销毁的过程 就是生命周期，或者说从开始创建，初始化数据，编译模版，挂载DOM==》渲染，更新==〉渲染，销毁等一系列过程 称之为生命周期

6.生命周期有什么作用

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程中时更容易形成好的逻辑

7.vue的生命周期总共有几个阶段

有8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

8.第一次页面加载会触发哪几个钩子？

会触发 beforeCreate,creates,beforeMount.mounted

DOM渲染在 mounted 中就已经完成了

9.计算属性computed 和监听watch的区别

• 计算属性：是自动监听依赖值的变化，从而动态返回内容

• 监听：是一个过程，在监听的值 发生改变的时候，可以触发一个回调，并做一些事情

• computed 和 watch 的区别：

  • 缓存：

    • computed 支持缓存，只有依赖数据发生改变，才会重新计算

    • watch不支持缓存，数据变化，直接回触发相应的操作

  • 同步 异步

    • computed 不支持异步，当computed 内有一步操作时无效，无法监听数据的变化

    • watch支持一步操作

  • computed 属性值会默认走缓存，计算属性是基于它们的响应式以来进行缓存的，也就是基于data中声明过 或者父组件传递的prop中的数据通过计算得到的值

  • 数据定义的位置

    • computed 的数据不可以定义在data 里面

    • watch 的数据一定要定义在data中

• 用法区别

  • 只是需要动态值 那么就使用计算属性

  • 如果需要知道值的变化之后执行业务逻辑，就使用watch

10.computed特性

• 是计算属性

• 应用：就是简化template 里面的{{}} 计算和处理 props 或者$emit 的传值

• 具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必在此执行函数

11.watch的特性

• 是观察的动作

• 应用：监听props $emit 或者本组件的值 执行异步操作

• 无缓存性，页面重新渲染时不变化也会执行

12.computed 动态计算的工作流程

• data 属性初始化 getter setter

• computed 计算属性初始化，提供的函数将用作属性，vm.reversedMessage 的getter

• 当首次获取 reversedMessage 计算属性的值时，Dep 开始以来收集

• 在执行message getter方法时，如果Dep 处于以来收集状态，则判定message为revserdMessage 的依赖，并建立依赖关系

• 当 message 发生变化时，根据依赖关系，触发reversedMessage 的重新计算

13.vue路由的实现：hash模式 和 history 模式

• hash模式：在浏览器中 #以及#之后字符称之为 hash

• history模式：

14.组件中data为什么时一个函数

• 因为组件时用来复用的，js里对象时引用关系，data为一个函数 然后return一个对象，这样作用域就没有隔离

• 而new Vue 的实例，是不会被复用的，因此不存在引用对象的问题

15.说说vue中的动态组件

多个组件通过同一个挂载点进行组件的切换，this的值是哪个组件的名称，那么页面就显示哪个组件

16.递归组件的用法

• 组件是可以在它们自己的模版中调用自身的，不过它们只能通过name 选项来做

• 既然是递归，那么一定要有结束递归的条件，否则就会使用组件循环引用，最终出现栈溢出

  • 可以使用v-if="false" 作为递归组件的结束条件，当遇到v-if为false的时候，组件将不会在进行渲染

17.keep-alive 内置组件的作用

• 可以在被keep-avlie包裹的组件不经历 创建和销毁，而是直接进入缓存

• 凡事被keep-avlie包裹的组件，除了第一次以外，都不会经历创建和销毁

18.keep-avlie的生命周期

created===》mounted===〉activated===》deactivated

再次进入 只触发 activated

19.vuex 页面刷新数据丢失怎么解决

需要做vuex数据的持久化，一般使用本地储存的方案保存数据

可以使用vuex-persist 插件

20.使用过ssr吗？说说ssr

ssr 也就是服务器渲染，也就是将在客户端把标签渲染成html的工作放在服务端，然后服务端渲染成html结构 直接返回给客户端

• 优点：

  • ssr 有着更好的seo

  • ssr 首屏加载速度更快

• 缺点：

  • 开发条件会受到限制，服务端渲染只支持 beforeCreate 和 create两个钩子

  • 服务器会有更大的负载需求

21.vue 中使用了哪些设计模式？

• 工厂模式：传入参数即可创建实例

• 单例模式：整个程序有且只有一个实例

  • vuex 和 vue-router的插件注册方法 install 判断，如果系统有存在的实例就直接返回掉

• 发布-订阅者模式：vue事件机制

• 观察者模式：响应式数据原理

• 装饰器模式：@装饰器的用法

• 策略模式：策略模式 指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案

22.都做过哪些 vue的性能优化

• 对象层级不要过深

• 不需要响应式的数据不要放在data中，可以使用object.freeze() 冻结数据

• v-if 和 v-show 区分场景使用

• computed 和watch 分场景使用

• v-for 遍历必须加 key key最好时数据的id值，且避免和v-if 一起使用

• 大数据列表和表格性能优化，虚拟列表/虚拟表格

• 防止内部泄漏，组件销毁后吧全局变量和事件销毁

• 图片懒加载

• 路由懒加载

• 第三方插件按需加载

• 适当采用keep-alive

• 防抖，节流的运用

• 服务器渲染

23.nextTick 使用场景和原理

nextTick 中的回调函数就是在下次DOM 更新循环结束之后执行的延迟回调

在修改数据之后立即使用这个方法，获取更新后的DOM

主要思路就是采用微任务优先的方式调用 一步方法去执行nextTick 包装方法

24.什么时候需要使用nextTick

• vue生命周期的create() 钩子函数进行的DOM 操作一定要放在vue.nextTick() 的回调函数中

  • 在create() 钩子函数执行额时候进行DOM，其实并为进行然和渲染，而此时进行DOM操作无异于徒劳，所以在create函数中操作DOM，一定要将代码放入vue.nextTick() 中

• 改变DOM元素的数据后，基于新的DOM 做点什么，对新的DOM 一系列的js操作都需要放进vue.nextTick() 回调函数中

• 在使用某个第三插件时，希望在vue生成DOM动态发生变化时重新应用该插件，也会用到该方法，这个时候需要在nextTick的回调函数中执行重新应用插件的方法

25.vuex 的运行机制

vuex 提供state?来驱动视图，通过dispatch 派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutation，最后mutation来更改state

26.vuex的核心

• state：基本数据

  • 我们可以通过vue的computed获取vuex的state

  • 当一个组件需要获取多个状态的时候，将执行额鞋状态都生米高为计算属性会有些重复和冗余，可以使用 mapState 辅助函数帮助我们生成计算属性

• getter：从基本数据派生的数据

• mutation：提交更改数据的方法，同步

  • 提交mutation时更改vuex中的store中状态的唯一方法

  • 使用store.commit 方法调用mutation的回调函数

• actions：像一个装饰器，包裹mutation，可以异步

  • actions 提交的是mutation，不是直接更改状态

• modules：模块化vuex

27.keep-alive 使用场景和原理

• keep-alive 是vue内置的一个组件，可以实现组件的缓存，当组件切换时不会对当前组件进行卸载

  • 常用的两个属性，include/exclude，允许组件有条件的进行缓存

  • 两个生命周期activated/deactivated，用来得知当前组件是否处理活跃状态

  • keep-alive 运用了LRU算法，选择最近最久为使用的组件予淘汰

28.什么是LRU 算法

• 将新数据从尾部插入到 this.keys 中

• 每当缓存命中（缓存被访问），则将数据移到 this.keys 的尾部

• 当 this.keys 满的时候，将头部的数据丢弃

29.Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。

30.Vue3.0 用过吗？了解多少？

• 响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。

• 组件选项声明方式 Vue3.x 使用 Composition API setup是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口。

• 模板语法变化 slot 具名插槽语法，自定义指令v-model升级。

• 其他方面的更改 Suspense支持Fragment（多个根节点）和 Protal（在dom其他部分渲染组件内容）组件，针对一些特殊的场景做了处理。基于 treeShaking 优化，提供了更多的内置功能。