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…
