常见Vue面试题_react 组件销毁时会销毁对应的变量吗

常见Vue面试题

1.对Vue的理解

vue是一套用于构建用户界面的渐进式框架，相当于view层, 可以双向数据绑定, 相对其他框架，他更轻量, 性能上更高效, 更容易上手, 学习成本低,可以和各种支持的第三方库结合使用，完全能够为复杂的单页面富应用(SPA)提供驱动

2.与React的区别

React采用特殊的JSX语法，Vue在组件开发中使用.vue特殊文件格式；中心思想相同：都是使用组件，组件实例之间可以嵌套；都不内置AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。

3.生命周期

• 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

• 可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

• beforeCreate：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

• created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

• beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

• mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

• beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

• updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

• beforeDestroy：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁

• destroyed： 这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

4.Vue获取数据在哪个生命周期

• 一般 created/beforeMount/mounted 皆可
• 如果你要操作 DOM , mounted 时候才能操作
• 如果想要在created操作DOM，可以通过 vm.$nextTick 来访问 Dom

5.MVVM与MVC

5.1MVVM

• Model模型：用于处理应用程序的数据逻辑
• View视图：用于应用程序中处理数据显示
• ViewModel视图模型：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，二是将【视图】转化成【模型】
• vue是实现了双向数据绑定的mvvm框架，就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

5.2MVC

• 在 Controller 里面把 Model 的数据赋值给 View

• Model模型：用于处理应用程序的数据逻辑

• View视图：用于应用程序中处理数据显示

• Controller控制器：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据

5.3区别

• MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变

6.Vue中响应式是如何实现的？

vue 响应式是通过 数据劫持 结合 观察者模式的方式来实现的，
核心：关于VUE响应式，其核心是 Object.defineProperty()方法。

7.vue组件中的data为什么是函数

组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了

8.分别简述computed和watch的使用场景

• computed:计算属性
  • 当一个属性受多个属性影响的时候就需要用到computed
  • 最典型的栗子： 购物车商品结算的时候
• watch:侦听属性
  • 当一条数据影响多条数据的时候就需要用watch
  • 栗子：搜索数据

9.如何获取dom

ref=“domName” 用法：this.$refs.domName

10.Vue两个核心点

数据驱动(ViewModel)、组件系统

11.Vue组件通信方式

• props 和$emit：父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的

• $parent,$children 获取当前组件的父组件和子组件

• $refs获取组件实例

• eventBus 兄弟组件数据传递 ，这种情况下可以使用事件总线的方式

• vuex状态管理

12.虚拟DOM是什么？有什么优缺点？

• 本质就是用一个原生的 JS 对象去描述一个 DOM 节点，是对真实 DOM 的一层抽象

• 在浏览器中频繁的操作 DOM，会产生一定的性能问题。这就是虚拟 Dom 的产生原因

• 优点：

  • 无需手动操作 DOM
  • 跨平台
  • 保证性能下限

• 缺点

  • 无法进行极致优化
  • 会比 innerHTML 插入慢，首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算

13.Vue事件绑定原理

• 原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的。
• 如果要在组件上使用原生事件，需要加**.native** 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件

14.Vue-Router动态路由

• 把某种模式匹配到的所有路由，全都映射到同个组件
• 路由路径中使用“动态路径参数”

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: "/user/:id", component: User },
  ],
});
1
2
3
4
5
6

• vue-router 组件复用导致路由参数失效怎么办?
  • 用 :key

15.对Vuex的理解

vuex 是专门为 vue 提供的全局状态管理系统，可以为多个组件实现数据共享、数据缓存等

• 主要包括以下几个模块
  • State：存放数据
  • Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation：是唯一更改 State的方法，且必须是同步函数
  • Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
  • Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

16.Vuex 页面刷新数据丢失怎么解决

• 需要做 vuex 数据持久化， 一般使用本地存储的方案来保存数据 ，可以自己设计存储方案 ，也可以使用第三方插件
• 推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中

17.Vuex 为什么要分模块

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象中。
• 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
• 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

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

• 1.工厂模式 - 传入参数即可创建实例

  虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode

• 2.单例模式 - 整个程序有且仅有一个实例

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

• 3.发布-订阅模式 (vue 事件机制)

• 4.观察者模式 (响应式数据原理)

• 5.装饰模式: (@装饰器的用法)

• 6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

19.都做过哪些 Vue 的性能优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
• 防止内部泄漏，组件销毁后把全局变量和事件销毁
• 图片懒加载
• 路由懒加载
• 适当采用 keep-alive 缓存组件
• 防抖、节流运用

20.Vue.mixin 的使用场景和原理

• 在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，

• 原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。