vue为什么要销毁第三方实例_前端常见的Vue面试题目汇总

写这篇文章的原因是想好好把vue复习一下&＃xff0c;然后整理一下我认为常见很重要的面试题&＃xff0c;也方便我自己以后查阅&＃xff0c;我觉得这些基本上是Vue里面相关的所有重要知识点了&＃xff0c;相信会对现在找工作的小伙伴们很大帮助!

问题大纲

大家可以先看一下这个提纲思考下&＃xff0c;看看自己还有哪些不清楚的地方&＃xff0c;查漏补缺一下~~~

• 谈一下你对MVVM原理的理解
• 请说一下响应式数据的原理
• 为何Vue采用异步渲染
• vue优点
• Proxy与Object.defineProperty()的对比
• 如何比较React和Vue
• Vue中相同逻辑如何抽离
• nextTick实现原理
• diff算法的时间复杂度
• 简述Vue中diff算法原理
• Vue中v-if和v-show的区别
• Vue每个生命周期什么时候被调用
• 异步请求适合在哪个生命周期调用
• 第一次页面加载会触发哪几个钩子
• 为什么v-for和v-if不能连用
• Vue如何进行组件间的通信
• 什么时候需要使用到beforeDestroy
• 谈谈你对作用域插槽的理解
• 谈谈你对keep-alive的了解
• v-for中为什么要用key
• 组件中的data为什么是函数
• computed和watch有什么区别
• vue几种常用的指令
• vue常用的修饰符
• Vue的渲染过程
• vue中的模板编译原理
• Vue中v-html会导致哪些问题
• 原生dom的绑定
• Watch中的deep:true是如何实现的
• action和mutation区别
• vue-router有哪几种导航钩子
• 实现hash路由和history路由
• $route和 $router的区别
• Vuex的理解及使用场景
• 你有对 Vue项目进行哪些优化
• Vue3.0你知道有哪些改进
• 为什么要使用异步组件&＃xff1f;

谈一下你对MVVM原理的理解

M - Model&＃xff0c;Model 代表数据模型&＃xff0c;也可以在Model中定义数据修改和操作的业务逻辑

V - View&＃xff0c;View 代表 UI 组件&＃xff0c;它负责将数据模型转化为 UI 展现出来

VM - ViewModel&＃xff0c;ViewModel 监听模型数据的改变和控制视图行为、处理用户交互&＃xff0c;简单理解就是一个同步 View 和 Model 的对象&＃xff0c;连接 Model 和 View

【重点】&＃xff1a;一定要理解Vue的MVVM原理&＃xff0c;面试必问&＃xff01;

请说一下响应式数据的原理

采用数据劫持结合发布者-订阅者模式的方式&＃xff0c;通过Object.defineProperty&＃xff08;&＃xff09;来劫持各个属性的setter&＃xff0c;getter

默认Vue在初始化数据时&＃xff0c;会给data中的属性使用Object.defineProperty重新定义所有属性&＃xff0c;当页面到对应属性时&＃xff0c;会进行依赖收集(收集当前组件中的watcher)如果属性发生变化会通知相关依赖进行更新操作

为什么Vue采用异步渲染

因为如果不采用异步更新&＃xff0c;那么每次更新数据都会对当前租金按进行重新渲染&＃xff0c;所以为了性能考虑&＃xff0c;Vue会在本轮数据更新后&＃xff0c;再去异步更新数据

Vue优点

• 轻量级框架
  只关注视图层,是一个构建数据的视图集合,大小只有几十kbVue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
• 简单易学
  国人开发,中文文档,不存在语言障碍,易于理解和学习
• 双向数据绑定
  通过MVVM思想实现数据的双向绑定&＃xff0c;让开发者不用再操作dom对象&＃xff0c;有更多的时间去思考业务逻辑
• 组件化Vue.js通过组件&＃xff0c;把一个单页应用中的各种模块拆分到一个一个单独的组件&＃xff08;component&＃xff09;中&＃xff0c;我们只要先在父级应用中写好各种组件标签&＃xff08;占坑&＃xff09;&＃xff0c;并且在组件标签中写好要传入组件的参数&＃xff08;就像给函数传入参数一样&＃xff0c;这个参数叫做组件的属性&＃xff09;&＃xff0c;然后再分别写好各种组件的实现&＃xff08;填坑&＃xff09;&＃xff0c;然后整个应用就算做完了
• 虚拟DOM
  把最终的DOM操作计算出来并优化&＃xff0c;由于这个DOM操作属于预处理操作&＃xff0c;并没有真实的操作DOM&＃xff0c;所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交&＃xff0c;将DOM操作变化反映到DOM树上
• 视图,数据,结构分离
  使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
• 运行速度更快
  像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

Proxy与Object.defineProperty()的对比

Proxy的优点&＃xff1a;

• 可以直接监听对象而非属性,并返回一个新对象
• 可以直接监听数值的变化
• 可以劫持整个对象&＃xff0c;并返回一个新对象

Proxy的缺点&＃xff1a;

• Proxy是es6提供的新特性&＃xff0c;兼容性不好&＃xff0c;所以导致Vue3一致没有正式发布让开发者使用

Object.defineProperty的优点&＃xff1a;

• 兼容性好&＃xff0c;支持IE9
• IE9以下的版本不兼容

Object.defineProperty的缺点&＃xff1a;

• 无法监控到数组下标的变化&＃xff0c;导致直接通过数组的下标给数组设置值&＃xff0c;不能实时响应
• 只能劫持对象的属性&＃xff0c;我们需要对每个对象的每个属性进行遍历

如何比较React和Vue

监听数据变化的实现原理不同&＃xff1a;

• Vue通过getter/setter以及一些函数&＃xff0c;能精确知道数据变化
• React默认是通过比较引用的方式(diff)进行的&＃xff0c;React不精确监听数据变化

数据流不同&＃xff1a;

• Vue2.0可以通过props实现双向绑定&＃xff0c;用vuex单向数据流的状态管理框架
• React不支持双向绑定&＃xff0c;提倡单项数据流&＃xff0c;Redux单向数据流的状态管理框架

组件通信的区别&＃xff1a;

• Vue三种组件通信方法&＃xff1a;
  父组件通过props向子组件传递数据或回调
  子组件通过事件event向父组件发送数据或回调
  通过provide/inject实现父组件向子组件传入数据&＃xff0c;可跨层级
• React三种组件通信方法&＃xff1a;
  父组件通过props向子组件传递数据React不支持子组件像父组件发送数据&＃xff0c;而使用的是回调函数
  通过 context实现父组件向子组件传入数据&＃xff0c; 可跨层级

模板渲染方式不同&＃xff1a;

• 表面上来看&＃xff1a;React通过JSX渲染模板Vue通过HTML进行渲染
• 深层上来看&＃xff1a;React是通过原生JS实现模板中常见语法,如&＃xff1a;插件&＃xff0c;条件&＃xff0c;循环Vue是与组件JS分离的单独模板&＃xff0c;通过指令实现&＃xff0c;如&＃xff1a;v-if

模板中使用的数据&＃xff1a;

• React里模板中使用的数据可以直接import的组件在render中调用
• Vue里模板中使用的数据必须要在this上进行中转&＃xff0c;还要import一个组件&＃xff0c;还要在components中声明

渲染过程不同&＃xff1a;

• Vue不需要渲染整个组件树
• React状态改变时&＃xff0c;全部子组件重新渲染

框架本质不同&＃xff1a;

• Vue本质是MVVM框架&＃xff0c;由MVC发展而来
• React是前端组件化框架&＃xff0c;由后端组件化发展而来

Vuex和Redux的区别&＃xff1a;

• Vuex可以使用dispatch、commit提交更新
• Redux只能用dispatch提交更新

组合不同功能方式不同&＃xff1a;

• Vue组合不同功能方式是通过mixin&＃xff0c;可以帮我定义的模板进行编译、声明的props接收到数据….
• React组合不同功能方式是通过HoC(高阶组件)&＃xff0c;本质是高阶函数

Vue中相同逻辑如何抽离

Vue.mixin用法给组件每个生命周期&＃xff0c;函数等都混入一些公共逻辑

nextTick实现原理

nextTick方法主要是使用了宏任务和微任务&＃xff0c;定义一个异步方法&＃xff0c;多次调用nextTick会将方法存在队列中&＃xff0c;通过这个异步方法清空当前队列。所以这个nextTick方法就是异步方法

diff算法的时间复杂度

两个数的完全的diff算法是一个时间复杂度为o(n3)&＃xff0c; Vue进行了优化O(n3)复杂度的问题转换成O(n)复杂度的问题(只比较同级不考虑跨级问题)在前端当中&＃xff0c;你很少会跨级层级地移动Dom元素&＃xff0c;所以Virtual Dom只会对同一个层级地元素进行对比

简述Vue中diff算法原理

• 先同级比较&＃xff0c;在比较子节点
• 先判断一方有儿子一方没儿子的情况
• 比较都有儿子的情况
• 递归比较子节点

(大家要是不懂也可以看下这篇文章)对Dom-Diff的理解

Vue中v-if和v-show的区别

v-show是css切换&＃xff0c;v-if是完整的销毁和重新创建

使用 频繁切换时用v-show&＃xff0c;运行时较少改变时用v-if

v-if&＃61;‘false’ v-if是条件渲染&＃xff0c;当false的时候不会渲染

Vue每个生命周期什么时候被调用

• beforeCreate在实例初始化之后&＃xff0c;数据观测(data observer)之前被调用
• created实例已经创建完成之后被调用&＃xff0c;在这一步&＃xff0c;完成已完成以下的配置&＃xff1a;数据观测(data observer)&＃xff0c;属性和方法的运算&＃xff0c;watch/event事件回调&＃xff0c;这里没有$el
• beforeMount在挂载开始之前被调用&＃xff1a;相关的render函数首次被调用
• mounted el被创建的vm.$el替换&＃xff0c;并挂载到实例上去之后调用该钩子
• beforeUpdate数据更新时调用&＃xff0c;发生虚拟DOM重新渲染和补丁之前
• updated由于数据更改导致的虚拟DOM重新渲染和打补丁&＃xff0c;在这之后调用该钩子
• beforeDestory实例销毁之前调用&＃xff0c;在这一步&＃xff0c;实例仍然完全可用
• destroyed Vue实例销毁后调用&＃xff0c;调用后&＃xff0c;Vu实例指示的所有东西都会解绑定&＃xff0c;所有的事件监听器会被移除&＃xff0c;所有的子实例也会被销毁&＃xff0c;该钩子在服务器端渲染期间不被调用

异步请求适合在哪个生命周期调用

异步请求是在mounted生命周期中调用的&＃xff0c;而实际上也可以在created生命周期中调用

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

为什么v-for和v-if不能连用

当 v-for 和 v-if 处于同一个节点时&＃xff0c;v-for 的优先级比 v-if 更高&＃xff0c;这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大&＃xff0c;而真正要展示的数据很少时&＃xff0c;这将造成很大的性能浪费。 这种场景建议使用 computed&＃xff0c;先对数据进行过滤

Vue如何进行组件间的通信

父子通信

父向子传递数据通过props

子向父传递是通过$emit、event

子实例访问父实例通过$parent

父实例访问子实例通过$children

$attrs用父组件传递数据给子组件或孙组件 (包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外))

listeners用父组件传递数据给子组件或孙组件 包含了父作用域中的 (不含 .native 修饰器的)v-on 事件监听器

祖先组件通过provider提供变量给子孙组件

子孙组件通过inject注入变量给祖先组件

ref用来访问组件实例

兄弟通信

vuex用来作为兄弟之间和跨级之间的通信

跨级通信

vuex用来作为兄弟之间和跨级之间的通信

$attrs用父组件传递数据给子组件或孙组件 (包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外))

listeners用父组件传递数据给子组件或孙组件 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

祖先组件通过provider提供变量给子孙组件

子孙组件通过inject注入变量给祖先组件

(大家要是还不清楚可以看下这篇文章)

彻底理解Vue组件间通信(6种方式)-完整版

什么时候需要使用beforeDestroy

• 可能在当前页面中使用了$on方法&＃xff0c;那需要在组件销毁前解绑
• 清除自己定义的定时器
• 解绑事件的绑定srcoll mousemove....

谈谈你对作用域插槽的理解

单个插槽&＃xff1a;

当子组件模板只有一个没有属性的插槽时&＃xff0c; 父组件传入的整个内容片段将插入到插槽所在的 DOM 位置&＃xff0c; 并替换掉插槽标签本身

命名插槽&＃xff1a;

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。 多个插槽可以有不同的名字。 这样可以将父组件模板中 slot 位置&＃xff0c; 和子组件slot元素产生关联&＃xff0c;便于插槽内容对应传递

作用域插槽&＃xff1a;

可以访问组件内部数据的可复用插槽(reusable slot) 在父级中&＃xff0c;具有特殊特性 slot-scope 的