1。说说mvvm框架mvvm是model-view-viewmodel的缩写。也就是mvc中的Controller进化成了viewmodel。Model层代表数据模型，View层代表ui组件。viewModel是视图层和模型层之间的桥梁。数据绑定到视图模型层，并自动将数据渲染到视图。当view发生变化时，会通知viewmodel层更新数据。2.引入vue响应式系统。Vue会使用Object.defineProperty对数据的getter/setter方法进行拦截，结合发布订阅模式，在getter中订阅，在setter中发布通知，让所有订阅者完成响应3.你知道原理吗vue3.0响应式数据？Vue3被proxyObject.defineProperty代替了。因为proxy可以直接监听对象和数组的变化。4.computed和watch的区别computedproperty和listenerwatch都可以观察属性的变化并做出响应的区别：Computed本质上是一个带缓存的watcher，当依赖的属性发生变化时，view就会更新。适用于计算对性能消耗较大的计算场景。当表达式过于复杂时，在模板中放入过多的逻辑会使模板难以维护，可以在计算属性中处理复杂的逻辑。Watch没有缓存，更多的是一个观察功能，可以监听某些数据并执行回调。当我们需要对对象中的属性进行深度监控时，可以开启deep:true选项，这样对象中的每一项都会被监控到。这会导致性能问题。优化的话，可以用字符串的形式来监控。如果没有写入组件，别忘了使用unWatch手动退出。5.介绍vue的生命周期beforeCreate是在newVue()之后触发的一个钩子，在当前阶段，无法访问数据、计算的方法、watch数据和方法。Created在创建实例之后发生。当前阶段已经完成了数据观察，即可以使用数据，也可以改变数据。这里更改数据不会触发更新函数，可以做一些初始数据获取，现阶段不能和dom交互。beforeMount发生在mount之前，template模板已经导入到渲染函数中进行编译，当前阶段已经创建了虚拟dom，即将开始渲染。这时候也可以修改数据。mounted发生在挂载完成之后。目前阶段完成真正的dom挂载，双向绑定数据，可以访问dom节点。beforeUpdate发生在更新之前，即响应式数据更新发生，虚拟dom在重新渲染之前被触发。updated发生在更新完成之后。当前阶段的组件dom已经更新。cleartimerdestroyed发生在数据实例被销毁之后。这时候就只剩下dom壳了。组件已经拆解，数据绑定解除，监听器移除。6.组件之间如何通信父子组件通信父组件>子组件prop子组件>父组件$emit获取组件实例使用$parent/$childred$refs.xxx兄弟组件通信eventbusvuex跨组件通信provide/injecteventbusvuex7.Vue事件绑定原理下面说说组件事件绑定：每个vue实例都是一个事件总线。创建子组件时，父组件将事件传递给子组件。在子组件初始化的时候，有一个$on方法来注册里面的事件，$emit用来在需要的时候触发该函数。对于原生的Native事件，使用addEventListener绑定到真实的dom上8.vue模板渲染的原理是什么vue中的template模板无法被浏览器解析渲染，因为这不是浏览器标准，不是正确的html语法,所以需要转换模板它是一个javascript函数，让浏览器执行这个函数并渲染相应的html元素，从而使视图运行起来。这个转换过程称为模板编译。模板编译分为三个阶段，parsing，parse，optimizegenerategenerate，最后生成可执行函数renderparse阶段：使用大量正则表达式解析模板字符串，将标签指令属性等转化为抽象语法treeAST优化阶段：遍历AST，找到一些静态节点并标记出来，方便在页面重新渲染时进行diff比较时跳过这些静态节点。生成阶段：将最终的AST转换为渲染函数字符串9.什么是模板预编译对于Vue组件来说，模板编译只是在组件实例化时编译一次，生成渲染函数后不会编译，而模板编译的目的不仅仅是将模板转换为渲染函数的过程，而是可以在项目构建过程中完成，因此实际组件可以在运行时直接跳过模板渲染，从而提高性能。工程建设中编译模板的过程就是预编译。10.模板和jsx有什么区别？就是这样，而我们预编译完成后，只需要保证在构建过程中生成render函数即可。在webpack中，我们要vue-loader来编译.vue文件，而内部依赖vue-template-compiler模块，在webpack构建过程中，将模板预编译成render函数JSX比模板具有更高的灵活性，并且具有在复杂组件中具有更多优势。虽然模板看起来有点呆板，但是模板在代码结构上更符合视图与逻辑分离的习惯，更简单、更直观、更好维护。11、什么是虚拟dom？虚拟dom是javascript中dom段的一种抽象数据结构。之所以需要虚拟dom，是因为在浏览器中操作dom的成本比较高。频繁操作dom会导致性能问题。Virtualdomdom的作用是每次响应式数据发生变化时，对比更新前后的虚拟dom，匹配更新前后的虚拟dom，找到尽可能少的真实dom，提高性能。Diff算法13key属性的作用在diff节点的过程中，判断是否为同一节点的一个重要条件是key是否相等。如果是同一个节点，会尽可能重用原来的DOM节点。14.说说vue2.0和3.0的区别。重构响应式系统使用proxy代替object.defineProperty。使用proxy的好处是可以直接监听数组类型的数据变化。监听的目标是对象，不需要遍历applyownKeys等13个方法可以拦截，直接实现对象属性的增删改查。新的compositionApi更利于逻辑复用和代码组织重构。优化虚拟Dom模板编译。将一些静态节点编译成constantslots进行优化，将slots编译成lazyfunctions，将slot渲染的决定权交给子组件代码结构调整，体积更小，使用typescript替代flow15。为什么在vue2.0中加入组合Api其中，随着功能的增多，组件也越来越复杂，难以维护。维护困难的根本原因是Vue的API设计迫使开发人员使用watchcomputedmethods选项来组织代码而不是实际的业务逻辑。Vue2缺乏一个相对简单和低成本的机制来完成逻辑重用。minxis虽然可以完成逻辑复用，但是当mixin比较多的时候，会很难从那个mixin中找到对应的数据计算或者方法，所以CompositionAPI的optionAPI的出现主要是为了解决optionAPI带来的问题。首先是代码组织的问题。CompositionAPI允许开发者根据业务逻辑组织自己的代码，使代码具有更好的可读性和可扩展性。二是实现代码的逻辑抽取和复用。16.据说compositionApi和Reacthook很相似，说说区别compositionAPI是基于Vue的响应式系统实现的，声明在setup函数中，一个组件实例化只调用一次setup，而ReactHook每次重新渲染都需要调用hook，使得react性能相比vue，compostionAPI的调用速度比较慢，无需担心调用顺序，响应式系统也可以在循环条件的嵌套函数中使用，自动实现依赖收集，进而进行一些性能优化components由vue自己完成。17.SSR你懂吗？原理是什么？当客户端请求服务器时，服务器从数据库中获取相关数据，并在服务器内部将Vue组件渲染成HTML，并将数据和HTML返回给客户端。服务器将数据和组件转换为HTML的过程称为服务器端渲染SSR。当客户端拿到服务端渲染的HTML和数据时，由于数据已经存在，客户端不需要再次请求数据，只需要将数据Synchronize到组件或者Vuex内部即可。除了数据意外之外，HTML结构已经存在。客户端在渲染组件时，只需要将HTMLDOM节点映射到VirtualDOM即可。无需重新创建DOM节点。这个同步数据和HTML的过程，也称为客户端激活。使用SSR的好处：对SEO有好处：其实爬虫爬你的页面是有好处的，因为有些页面爬虫不支持JavaScript执行，不支持JavaScript执行的爬虫抓到的非SSR页面会是一个EmptyHTML页面，加上SSR，这些爬虫就可以获得完整的HTML结构的数据，然后收录到搜索引擎中。白屏时间更短：与客户端渲染相比，服务端渲染在浏览器请求URL后，已经得到了一个带有数据的HTML文本。浏览器只需要解析HTML，直接构建DOM树。对于客户端渲染，你需要先得到一个空的HTML页面。此时页面已经进入白屏，接下来需要加载并执行JavaScript，请求后端服务器获取数据，JavaScript渲染页面，查看最终结果。页。尤其是在复杂的应用中，由于需要加载JavaScript脚本，应用越复杂，需要加载的JavaScript脚本越多越大，会导致应用首屏加载时间非常长，从而降低体验感。借鉴本站vue20面试https://juejin.im/post/684490...谈谈对vue.js框架的理解https://github.com/yacan8/blo...游达总结https://juejin.im/post/684490…
