今天总结了一些Vue相关的面试题，希望能帮助到大家。 问题目录 ①：说说Vue和Angular、ReactJS的相同点和不同点 ②：简单描述一下Vue中的MVVM模型 ③：v-if和v-show指令有什么区别？ ④：如何阻止Vue中的绑定事件不发生冒泡 ⑤：父、子组件间是如何通信的？ ⑥：非父子层级的组件如何实现通信？ ⑦：什么是动态组件？他的作用是什么？ ⑧：为什么组件中的data属性的值必须是一个函数？ 答案与详解 Q 说说Vue和Angular、ReactJS的相同点和不同点 与React的相同
v-if,根据true或是false,来决定是否插入到页面当中，dom节点，不在页面中
通过以上三种方式， 我想你应该能解决绝大多数父子组件通信的场景了，但让我们再仔细考虑一下上面的通信场景，就会发现它们还可能存在的问题： 从子组件向父组件传递数据时，父子组件中的数据仍不是每时每刻都同步的,
今年大前端的概念一而再再而三的被提及，那么大前端时代究竟是什么呢？大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来，不过现在大前端的范围已经越来越大了，包含前端 + 移动端，前端、CDN、Nginx、Node、Hybrid、Weex、React Native、Native App。笔者是一名普通的全职 iOS 开发者，在接触到了前端开发以后，发现了前端有些值得移动端学习的地方，于是便有了这个大前端时代系列的文章，希望两者能相互借鉴优秀的思想。谈及到大前端，常常被提及的话题有：组件化，路由与解耦，工程化（打包工具，脚手架，包管理工具），MVC 和 MVVM 架构，埋点和性能监控。笔者就先从组件化方面谈起。网上关于前端框架对比的文章也非常多（对比 React，Vue，Angular），不过跨端对比的文章好像不多？笔者就打算以前端和移动端（以 iOS 平台为主）对比为主，看看这两端的不同做法，并讨论讨论有无相互借鉴学习的地方。
DOM操作是非常昂贵的，因此我们需要尽量地减少DOM操作。这就需要找出本次DOM必须更新的节点来更新，其他的不更新，这个找出的过程，就需要应用diff算法
视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。
当我们拿到别人的项目的时候，一般情况下是没有node_modules包。需要使用命令去初始化依赖。
使用 v-model 指令可以很方便地实现双向数据绑定。以下是使用 v-model 指令实现双向数据绑定的步骤：
异步方法，异步渲染最后一步，与JS事件循环联系紧密。主要使用了宏任务微任务（setTimeout、promise那些），定义了一个异步方法，多次调用nextTick会将方法存入队列，通过异步方法清空当前队列。
Vue 采用基于组件的开发方式，那么组件之间的通信必不可少：比如父组件要给子组件传递数据，子组件将它内部发生的事情告知给父组件，因此定义一个良好的接口尽可能将组件解耦显得尤为重要，这保证不同的组件可以在相对独立的环境中开发测试，而且更方便阅读理解以及组件复用。
在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。
为了金三银四的跳槽季做准备，并且我是 vue 技术栈的，所以整理了若干个 vue 的面试题。
在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。 那Vue是如何实现让这些数组方法实现元素的实时更新的呢，下面是Vue中对这些方法的封装：
可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多 diff 和遍历其实都是不需要的，造成性能浪费
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。
当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
9.VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？
先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。
父组件通过属性绑定方式<vc-confirmDialog :msgTitle="msgObj.title" :msgBody="msgObj.msg" @cancel="closeDialog" @ok="deleteItem"></vc-confirmDialog>传递了两类属性参数给子组件：
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在子孙组件中使用 inject 来注入这个数据。
众所周知，Vue 和 React 都是目前非常著名的前端框架。我在工作中经常使用 Vue，因此我对它有很深入的了解。同时，我也对 React 充满了好奇，想要学习一下，一探究竟。
使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中
1. Vue.js－是国内开发者尤雨溪开发的js框架，它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计，从最简单的数据处理，到数据交互，到DOM操作，到路由处理等，VueJS都有完整的解决方案。
Vue是国内开发者尤雨溪开发的JavaScript框架，它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计，从最简单的数据处理，到数据交互，到DOM操作，到路由处理等，Vue都有完整的解决方案。
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。
时间复杂度： 个树的完全diff 算法是一个时间复杂度为O(n*3） ，vue进行优化转化成O(n) 。
Vue，Angular，React前端三大框架巨头，重要性不用多说，不过目前项目开发中主要用vue，现总结了一些Vue常用的知识点。
vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示
父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要。我们Vue数据通信就从组件通信开始说起。
1. LFOSSA X RISC-V International推出RISC-V人才培养计划，，LFOSSA希望透过这个计划，可以帮助机构进一步培养更多RISC-V开源人才，共建更好的RISC-V社区。--LOFSSA
diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch(打补丁)，从以下几点来理解：
最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:
几年前，我决定试着分别在 React 和 Vue 中构建一个相当标准的 To Do（待办事项）应用。这两个应用都是使用默认的 CLI 构建的（React 的 create-react-app 和 Vue 的 vue-cli）。我想尽量保持中立，通过这样的例子来告诉大家这两种技术执行特定任务时是怎样做的。
答：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
有五种，分别是 State、 Getter、Mutation 、Action、 Module
响应式的编程框架中都有一个永恒的主题 "状态管理"，无论是在 React/Vue 还是在Flutter中，他们的问题和解决的思想都是一致的
子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。02
相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景
本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~
当使用 new Vue() 创建一个 Vue 实例时，整个的流程可以概括为以下几个步骤：
创建一个 Vue 实例后，Vue 会处理选项、编译模板、挂载元素、建立数据响应式等操作，并根据数据的变化更新视图。用户还可以通过指令和事件系统来与实例进行交互。
1、v-show 和 v-if的区别，v-show 和 keep-alive 的区别
之前公司招人，面试了一些的前端同学，因为公司使用的前端技术是Vue，所以免不了问到其响应式原理和Vue的双向数据绑定。但是这边面试到的80%的同学会把两者搞混，通常我要是先问响应式原理再问双向数据绑定原理，来面试的同学大都会认为是一回事，那么这里我们就说一下二者的区别。
Vue是构建出色的Web应用程序的最灵活、灵活和强大的JavaScript框架之一。Vue中最重要的概念和关键特性之一是能够促进应用程序组件之间的通信。让我们深入探讨一下Vue中的“emits”概念，并了解它们如何以流畅和无缝的方式实现父子组件之间的通信。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
