计算属性和监视侦听器都可以侦听并响应属性更改。差异是：
计算属性就像缓存函数的观察者，可以对一个或多个数据属性执行复杂的计算，以生成提供给渲染函数的值。如果依赖属性发生更改，则计算不会立即重新计算。生成一个新值，但首先将其标记为脏数据，并在下次检索计算结果时重新计算并返回它。
监听器手表没有缓存功能。当监控的属性发生变化时，该函数立即执行。
6.Vue生命周期介绍
beforeCreate: new Vue() 之后触发的第一个钩子。数据、方法、计算和监控数据和方法在此阶段无法访问。
创建：在实例创建后发生。现阶段数据观测已完成。这意味着更改这里的数据不会触发更新的函数。可以执行初始数据检索，但在此阶段无法与Dom 交互。如果需要，可以通过vm.$nextTick 访问Dom。
beforeMount：在安装之前发生。在此之前，在渲染函数中导入并编译模板模板。这个阶段，虚拟Dom已经创建完毕，即将开始渲染。此时您还可以更改数据，但不会触发任何更新。
Mounting：发生在实际Dom挂载、数据双向绑定、Dom节点可访问、使用$refs属性操作Dom之后的这个阶段。
beforeUpdate：在更新之前发生。即在响应数据更新、虚拟dom重新渲染之前触发。您可以更改当前阶段的数据而无需重新渲染。
Updated：更新完成且当前阶段的组件Dom已更新后发生。请注意不要在此期间更改任何数据。可能会出现更新的无限循环。
beforeDestroy：在实例被销毁之前发生。此时，您可以执行清除定时器等后处理任务。
destroy：实例被销毁后发生。此时，只剩下dom shell 了。组件被反汇编，数据绑定被删除，监听器被删除，所有子实例被销毁。
7. 为什么组件数据必须是函数
组件可以用在许多不同的地方。换句话说，如果数据是对象，则该对象是引用类型，因此必须使用函数创建数据。为每个实例创建您自己的数据，以便同一组件的不同实例不会相互影响。
8. 组件之间如何通信？
亲子组件通讯
父组件-子组件：prop
子组件- 父组件：on/on/on/emit
获取组件的实例。使用父/父/父/子，$refs.xxx。获取实例后，您可以直接检索属性数据或调用组件上的方法。
兄弟组件通信
事件总线：每个Vue实例都是一个事件总线，都支持on/on/on/emit，兄弟组件的实例之间可以创建新的Vue实例，以事件总线的方式进行通信。
Vuex：提取状态和方法到Vuex完成共享
跨级组件通信
使用提供/注入
事件总线：与兄弟组件的事件总线进行通信。
Vuex：提取状态和方法到Vuex完成共享
9、说说Vue事件绑定的原理
每个Vue 实例都是一个事件总线。创建子组件时，父组件将事件传递给子组件。使用on 方法在内部注册事件。事件使用on 方法在内部注册，对于本机事件，使用addEventListener 绑定到实际的DOM 元素。
10.vue有什么优点？
低结合力。视图可以独立于模型进行修改和修改。一个视图模型可以绑定到另一个“视图”，当视图改变时，模型不会改变，视图也不会改变。
可重复使用性。您可以将一些视图逻辑放入ViewModel 中，并在多个视图中重用此视图逻辑。
原创开发。开发人员可以专注于开发业务逻辑和数据（ViewModel），设计人员可以专注于设计页面。
可测试。测试接口一直很困难，但现在您可以为ViewModel 编写测试
11.Vue、Angular 和React 有什么区别？
1. 与AngularJS的区别
相同点：
两者都支持内置和自定义指令。
两者都支持过滤器（内置过滤器和自定义过滤器）。
两者都支持双向数据绑定。
两者都不支持低端浏览器。
不同之处：
1. AngularJS 的学习成本较高，例如添加依赖注入功能，而Vue.js 本身提供的API 相对简单直观。
2. 在性能方面，AngularJS 依赖于数据的脏检查，因此Watcher 越多，速度就越慢。
Vue.js 使用基于依赖跟踪的观察并使用异步排队更新。所有数据都是独立触发的。 对于大型应用程序，这种优化的差异是显而易见的。
2. 与React的区别
相同点：
1. React 使用特殊的JSX 语法，也建议编写.vue 特殊文件格式进行组件开发。两者都必须编译和使用。
2、核心思想是一样的。一切都是组件，组件的实例可以嵌套。
3. 两者都提供合理的hook功能，并允许开发者定制他们的需求。
4. AJAX、Route等功能没有内置到核心包中，而是作为插件加载。 5.支持组件开发中的mixin功能。
不同之处：
React 依赖于Virtual DOM，而Vue.js 使用DOM 模板。 React 使用的虚拟DOM 对渲染结果执行脏检查。
Vue.js 提供了带有指令、过滤器等的模板，可以让你非常方便快捷地操作DOM。
12.vue中的计算属性是什么？
在模板中放入过多的逻辑将使它们变得笨重且难以维护。当您的数据需要复杂处理并且可能会多次使用时，请考虑使用计算属性。优点：数据处理的结构清晰；根据数据更新数据，处理结果自动更新；计算属性中的this指向vm实例；模板调用时记下即可；你需要它。直接获取计算出的属性名称。 常用的getter方法也可以与set方法一起使用来改变数据。 与方法相比，无论相关数据如何变化，方法都会重新计算。如果未更改，则从缓存中检索计算结果并且不重新计算。
13、vue等单页面应用程序（spa）及其优缺点
优点：Vue 的目标是通过尽可能简单的API 来实现视图组件以及响应式数据绑定。其核心是响应式数据绑定系统。 MVVM，数据驱动、组件化、轻量、简洁、高效、快速、模块友好。这意味着所有内容都会首先加载，因此您不会遇到页面冻结的情况。
缺点：不支持低版本浏览器，仅支持IE9以上。它对SEO优化没有帮助（如果你想支持SEO，我们建议通过服务器渲染组件）。这在第一次是不可能的。要自行来回移动，您必须使用浏览器的导航按钮。
14.什么组件的属性是active-class？如何定义嵌套路由？
vue-router 模块中router-link 组件的属性。
嵌套路由：
嵌套路由，顾名思义，就是路由的多层嵌套。
要在router/index.js 中重建路由配置，您需要使用子数组来定义子路由定义。
{
路径：\’/我\’,
name:“我”，
组件：i，
儿童： [
{
path: \”收藏\”,
name: \”收藏\”,
组件：集合
},
{
path:“踪迹”，
name:“痕迹”，
组件： 跟踪
}
]
}
以“/”开头的嵌套路径被视为根路径，无需向子根添加“/”。
主路由上的路径在路由生成时会自动添加到子路由之前，因此无需在主路由上重新声明子路由上的路径。
在外层路由组件中，编写如下。
我的收藏
我的脚印
由于篇幅有限，我们只能分享部分面试问题。更多面试题及解答，点击免费分享。这是一种感恩的表达。
15.什么是pwa？
渐进式Web 应用程序（PWA）需要以下特征：
渐进式：所有用户都可以打开网页。 响应式：您的网页格式可以完美适应任何格式，无论是PC、手机还是平板电脑。
2. 离线应用：支持用户在没有互联网连接的情况下打开网页。这需要服务人员的帮助。
3.APP化：可以像APP一样与用户交互
4. 频繁更新：对网页所做的更改对用户立即可见。
5.安全：安全第一，为网站加一把绿锁——HTTPS
6. 可搜索：可通过引擎搜索
7.推送：无需打开网页即可推送新消息。
8.可安装：像APP一样将Web添加到您的桌面。
9. 可跳转：可以通过连接跳转到网页。
16.什么是槽位？它们有什么作用？原理是什么？
Slots（也称为插槽）是Vue的内容分发机制。组件内的模板引擎使用槽元素作为承载分布式内容的出口。 slot 是子组件的模板标签元素，父组件决定该标签元素是否以及如何显示。
槽分为三类：默认槽、命名槽和作用域槽。
默认槽：也称为匿名检查。如果插槽没有name 属性值，则组件中仅显示一个默认插槽。
命名槽：一个组件可以有多个具有特定名称或名称属性的槽。
作用域插槽：默认插槽和命名插槽的变体。匿名槽或命名槽之间的区别在于，当子组件呈现作用域槽时，子组件将成为组件内的数据。传递给父组件，父组件根据子组件传递的数据决定如何渲染槽。
实现原理：当子组件vm实例化时，会取出父组件传递过来的slot标签的内容，保存在vm.slot中。默认插槽是vm.slot。插槽为vm.slot.default，命名插槽为vm。如果找到插槽标签，请使用slot.xxx。 xxx 是插槽名称。组件执行渲染功能。如果找到槽标签，请使用槽内的内容替换它。如果存在数据，则该槽称为作用域槽。
17.Vue模板渲染的原理是什么？
Vue 模板不是浏览器标准的一部分，也不是有效的HTML 语法，因此它们无法被浏览器解析和渲染。因此，我们需要将模板转换为JavaScript函数，以便浏览器可以执行并渲染该函数。相应的HTML元素使视图能够执行，这个转换过程就构成了模板编译。
模板编译分为三个阶段：解析、优化、生成，最后生成可执行函数render。
解析阶段：使用多个正则表达式解析模板字符串，将标签、指令、属性等转换为抽象语法树AST。
优化阶段：遍历AST，找到并标记一些静态节点。这允许您在重新渲染页面时执行增量比较时直接跳过这些静态节点以优化运行时性能。
生成阶段：将最终的AST 转换为渲染函数字符串。
18.什么是模板预编译？
对于Vue组件，模板编译仅在组件实例化时进行一次，而不是在生成渲染函数之后进行。因此，编译会降低组件的运行时性能。
模板编译的目的很简单，就是将模板转换为渲染函数。这个过程是在项目构建过程中执行的，目的是让实际组件在运行时直接跳过模板渲染。编译模板的过程就是预编译。
19. 模板和jsx有什么区别？
运行时，只需检查预编译后的组件中是否存在渲染函数即可。剩下的就是确保渲染函数在构建过程中生成。
webpack 使用vue-loader 来编译.vue 文件，并使用内部依赖的vue-template-compiler 模块在webpack 的构建过程中将模板预编译为渲染函数。
与React类似，添加jsx语法糖解析器babel-plugin-transform-vue-jsx后可以直接手写渲染函数。
所以templates和jsx都是渲染的形式，区别是：
与模板相比，JSX 更加灵活，对于复杂的组件有很多优势，但模板感觉有点慢。但模板代码结构更符合视图和逻辑分离的约定，使其更简单、更直观、更易于维护。
20.我们来谈谈什么是虚拟DOM
虚拟DOM 是JavaScript 中DOM 节点的抽象数据结构。需要虚拟DOM 是因为在浏览器中操作DOM 的成本相对较高，而且频繁操作DOM 会导致性能问题。虚拟DOM 功能通过每当响应数据发生变化并重新渲染页面时，Vue 都会比较更新前后的虚拟DOM，以用最少的更新来匹配真实DOM，从而提高性能。
21.向Vue引入Diff算法
新旧虚拟DOM 对比时
首先，比较节点本身以确定它们是否是同一节点。如果不同，则删除该节点并创建新节点来替换它。
对于同一个节点，运行patchVnode来确定如何处理该节点的子节点。首先，检查一个是否有子节点，另一个没有（如果新子节点没有子节点，则删除旧子节点）。
如果比较中有子节点，则运行updateChildren 以确定如何操作这些新旧节点的子节点（diff core）。
如果匹配，则找到相同的子节点，并递归比较子节点。
diff 只比较同层的子节点，丢弃跨层节点的比较。这将时间复杂度从O(n^3) 降低到O(n)。也就是说，仅当两个节点都进行比较时。老孩子和新孩子是多个孩子。只需要使用核心Diff算法在节点处进行同级比较即可。
22. 关键属性的作用是什么？
在节点差分处理中，判断节点是否相同的一个很重要的条件是key是否相等。如果是同一个节点，则尽可能重用原始DOM 节点。因此，关键属性被提供给框架以供在差异期间使用，而不是提供给开发人员。
23、说说Vue 2.0和Vue 3.0的区别
重建响应式系统并使用代理来替换Object.defineProperty。使用代理的优点是：
可以直接监听数组类型的数据变化。
被监控的是对象本身。不需要像Object.defineProperty那样遍历每个属性，一定程度上提高了性能。
您可以拦截apply、ownKeys、has 等13 个方法，但不能拦截Object.defineProperty
直接添加/删除对象属性
新的组合API 可改善逻辑重用和代码组织
虚拟DOM 重构
模板编译时优化，将一些静态节点编译为常量
优化槽，将槽编译成惰性函数，并将槽渲染决策权交给子组件。
在模板中提取和重用内联事件（在每个渲染上重新生成原始内联函数）
调整绳索结构，使树木晃动更容易、更小
用Typescript 替换您的流程
总结
前端数据概览
如果一个框架的原理深入到具体的代码或者具体部分的实现，那么你需要比仅仅写一个框架更加注重细节。
该算法非常弱，因此最好对其进行进一步细化。如果不这样做，将会影响你的薪水和成功率。
最好通过各种渠道寻找内部人才，并在提交简历之前预先了解您的业务。这也将帮助您稍后决定一个好的报价。
如果您对某个特定优惠的待遇不满意，或者您不喜欢该业务，请相信自己，不要仅仅因为目前没有更好的优惠而放弃。无论是短暂还是N年，都需要你认真选择，才能过上幸福的生活。
如果您的朋友喜欢这篇文章，请点赞和转发支持我们。您的支持是我最大的动力。
#以上【推荐收藏】2020年各大厂商Vue面试题汇总将持续更新~相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/93022.html
