草庐IT

vue2面试常见面试题收集

勇敢的豆沙包 2023-03-28 原文

​Virtual DOM的理解

一、什么是vdom?

Virtual DOM 用JS模拟DOM结构 二、为何要用vdom?

1. DOM操作非常非常“rang贵”,将DOM对比操作放在JS层,提高效率 2. DOM结构的对比,放在JS层来做(图灵完备语言:能实现逻辑代码的语言) 三、vdom核心函数有哪些

//核心函数: h('标签名', {...属性名...}, [...子元素...]) h('标签名', {...属性名...}, '.........') patch(container, vnode) patch(vnode, newVnode)

Vue 路由懒加载

Vue项目中实现路由按需加载(路由懒加载)的3中方式:

1. vue异步组件 2. es6提案的 import() 3. webpack的require.ensure() //1、Vue异步组件技术: { path: '/home', name: 'Home', component: resolve => require(['path路径'], resolve) } //2、es6提案的import() const Home = () => import('path路径') //3、webpack提供的require.ensure() { path: '/home', name: 'Home', component: r => require.ensure([],() => r(require('path路径')), 'demo') }

Proxy与Object.defineProperty()的对比

Proxy的优点:

1. 可以直接监听对象而非属性,并返回一个新对象 2. 可以直接监听数值的变化 3. 可以劫持整个对象,并返回一个新对象 Proxy的缺点:

Proxy是es6提供的新特性,兼容性不好,所以导致Vue3一致没有正式发布让让广大开发者使用 Object.defineProperty的优点:

E9以下的版本不兼容 Object.defineProperty的缺点:

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

Vue 组件间的通信

1. props 和 $emit 2. 父组件向子组件传递数量通过props传递 3. 子组件向父组件传递通过$emit派发事件 4. parent 5. 中央数据总线EventBus 6. ref 和 refs 7. Provide 和 inject 8. listeners 9. Vuex

谈谈你对生命周期的理解

生命周期:Vue实例从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等一系列过程,称为Vue的生命周期

vue.js的生命周期一共有10个: 【beforeCreate】:实例初始化之后,this指向创建实例,不能访问到data、computed、watch、method上订单方法和数据 【created】:实例创建完成,可访问data、computed、watch、method上的方法和数据,未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组 【beforeMount】:在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数 【mounted】:实例挂载到DOM上,此时可以通过DOMAPi获取到DOM节点,$ref属性可以访问 【beforeUpdate】:响应式数据更新时调用,发生在虚拟DOM打补丁之前 【updated】:虚拟DOM重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作 【activated】:keep-alive开启时调用 【deactivated】:keep-alive关闭时调用 【beforeDestroy】:实例销毁之前调用。实例仍然完全可用,this仍能获取到实例 【destroy】:实例销毁后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

vue的diff算法

问题:渲染真实的DOM开销是很大的,修改了某个数据,如果直接渲染到真实dom上会引起整个DOM树的重绘和重排。

Virtual Dom 根据真实DOM生成的一个Virtual DOM,当Virtual DOM某个节点的数据改变后生成一个新的Vnode,然后Vnode和oldVnode作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode的值为Vnode. 注意:在采取diff算法比较的时候,只会在同层级进行,不会跨层级比较。 当数据发生改变时,set方法会让调用Dep.notify()方法通知所有订阅者Watcher,订阅者就会调用patch函数给真实的DOM打补丁,更新响应的试图。

vue-router导航守卫

一、导航守卫大体分为三类:

1. 全局守卫钩子 2. 独享守卫钩子 3. 路由组件守卫钩子 二、全局守卫钩子(在路由切换全局执行) 全局守卫钩子函数有三种:

const router = new VueRouter({....}) // 全局前置守卫 router.beforeEach((to, from, next) => { // do something }) // 全局解析守卫 router.beforeResolve((to, from, next) => { // do something }) // 全局后置守卫 router.afterEach((to, from) => { // do something }) 注意: to:route即将进入的路由 from:route即将离开的路由 next:function这个是必须要调用的 next()接受参数: next():直接执行下一个钩子,如果执行完了导航状态为comfirmed状态 next(false):中断当前导航,回到from的位置 next('/hello')或next({path:'/hello'}):路由到任意地址,可以携带参数等 next(error):会回到router.onError(callback) 三、独享守卫钩子 独享守卫是定义在单独的某一个路由里的

const router = new VueRouter({ routes: [{ path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // do something }, beforeLeave: (to, from, next) => { // do something } }] }) 四、路由组件守卫钩子 路由组件即是在vue-router中注册的组件叫路由组件

beforeRouteEnter(to, from, next) {} beforeRouteUpdate(to, from, next) {} beforeRouteLeave(to,from, next){}

Vuex的理解及使用场景

Vuex 是一个专为 Vue 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。

1. Vuex 的状态存储是响应式的;当 Vue 组件从 store 中读取状态的时候, 若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新 2. 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation, 这样使得我们可以方便地跟踪每一个状态的变化 Vuex主要包括以下几个核心模块:

1. State:定义了应用的状态数据 2. Getter:在 store 中定义“getter”(可以认为是 store 的计算属性), 就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来, 且只有当它的依赖值发生了改变才会被重新计算 3. Mutation:是唯一更改 store 中状态的方法,且必须是同步函数 4. Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作 5. Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

Vue底层实现原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调 Vue是一个典型的MVVM框架,模型(Model)只是普通的javascript对象, 修改它则试图(View)会自动更新。这种设计让状态管理变得非常简单而直观 Vue实现这种数据双向绑定的效果,需要三大模块:

1. Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者. 2. Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。 3. Watcher:链接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知, 执行指令绑定的相应的回调函数,从而更新试图。 Observer(数据监听器)Observer的核心是通过Object.defineProprtty()来监听数据的变动, 这个函数内部可以定义setter和getter,每当数据发生变化,就会触发setter。这时候Observer就 要通知订阅者,订阅者就是Watcher Watcher(订阅者)Watcher订阅者作为Observer和Compile之间通信的桥梁, 主要做的事情是:

1.在自身实例化时往属性订阅器(dep)里面添加自己 2.自身必须有一个update()方法 3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调 Compile(指令解析器) Compile主要做的事情是解析模板指令,将模板中变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定 更新函数,添加鉴定数据的订阅者,一旦数据有变动,收到通知,更新试图 ​ ​

有关vue2面试常见面试题收集的更多相关文章

  1. 【Java 面试合集】HashMap中为什么引入红黑树,而不是AVL树呢 - 2

    HashMap中为什么引入红黑树,而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道,在JDK1.8以及之前,针对HashMap有什么不同。JDK1.7的时候,HashMap的底层实现是数组+链表JDK1.8的时候,HashMap的底层实现是数组+链表+红黑树我们要思考一个问题,为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好???2.链表上述的截图其实就是链表的结构,我们来看下链表的增删改查的时间复杂度增:因为链表不是线性结构,所以每次添加的时候,只需要移动一个节点,所以可以理解为复杂度是N(1)删:算法时间复杂度跟增保持一致查:既然是非线性结构,所以查询某一个节点的时候

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类

  4. 西安华为OD面试体验 - 2

    西安华为OD面试体验开始投简历技术面试进展工作进展开始投简历去年一整年一直在考研和工作之间纠结,感觉自己的状态好像当时的疫情一样差劲。之前刚毕业的时候投了个大厂的简历,结果一面写算法的时候太拉跨了,虽然知道时dfs但是代码熟练度不够,放在平时给足时间自己可以调试通过,但是熟练度不够那面试当时就写不出来被刷了。说真的算法学到后期我感觉最重要的是熟练度和背板子(对于我这种普通玩家来说),面试题如果一上来短时间内想不出思路就完蛋了。然后由于当时找的工作不是很理想就又想考研了。但是考研是有风险的,我自我感觉自己可能冲不上那个学校,而找工作一个没成可以继续找嘛。本着抱着试试看的态度在boss上投了简历,

  5. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  6. ruby - 在 Ruby 数组中收集重复项的最快/单行方法? - 2

    像这样转换数组的最快/单行方法是什么:[1,1,1,1,2,2,3,5,5,5,8,13,21,21,21]...进入像这样的对象数组:[{1=>4},{2=>2},{3=>1},{5=>3},{8=>1},{13=>1},{21=>3}] 最佳答案 要获得所需的格式,您可以附加一个调用以映射到您的解决方案:array.inject({}){|h,v|h[v]||=0;h[v]+=1;h}.map{|k,v|{k=>v}}虽然它仍然是单行的,但它开始变得凌乱了。 关于ruby-在Ruby

  7. ruby - 符号的垃圾收集 Ruby 2.2.1 - 2

    所以从Ruby2.2+版本开始引入了符号垃圾回收。我在irb中编写了以下代码片段:before=Symbol.all_symbols.size#=>3331100_000.timesdo|i|"sym#{i}".to_symendSymbol.all_symbols.size#=>18835GC.startSymbol.all_symbols.size#=>3331因此,正如预期的那样,它收集了使用to_sym动态生成的所有符号。那么GC是如何知道收集哪些符号的呢?即使它们在程序中被引用,它会收集符号吗?符号垃圾回收是如何工作的?如果我创建的其中一个符号在程序中被引用,它还会收集它吗?

  8. ruby-on-rails - 收集 Rails 应用程序使用统计信息的最佳方式 - 2

    我有一个Rails应用程序,用户可以在其中设置他们的域并在其中发布内容。我需要收集公共(public)流量统计信息,例如网页浏览量等。此功能的一个很好的例子是我作为客户可以看到的flickr使用统计信息。问题是收集使用信息的最佳方式是什么。应该通过解析日志文件来完成还是应该在运行时收集并存储在数据库中?是否有任何工具或Rails插件已经提供了此功能?此解决方案应该可以很好地扩展,即使每月有数千个域和数百万次网页浏览。 最佳答案 GoogleAnalytics可能是您最好的选择... 关于

  9. 蓝桥杯C/C++VIP试题每日一练之报时助手 - 2

    ?作者主页:静Yu?简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者?社区地址:前端知识交流社区?博主的个人博客:静Yu的个人博客?博主的个人笔记本:前端面试题个人笔记本只记录前端领域的面试题目,项目总结,面试技巧等等。接下来会更新蓝桥杯官方系统基础练习的VIP试题,依然包括解题思路,源代码等等。问题描述:给定当前的时间,请用英文的读法将它读出来。时间用时h和分m表示,在英文的读法中,读一个时间的方法是:  如果m为0,则将时读出来,然后加上“o’clock”,如3:00读作“threeo’clock”。  如果m不为0,则将时读出来,然后将分读出来,如5

  10. [面试直通版]操作系统核心之进程、线程与协程(下) - 2

    点击->操作系统复习的文章集目录操作系统线程线程是什么进程与线程的关系用户态/内核态操作系统资源管理内核态用户态内核态/用户态切换程序运行类型分析计算密集型IO密集型结合进程,线程来理解程序运行类型分析协程基础上下文切换协程协程为什么叫协作式线程?协程的优缺点操作系统线程典型问题:简述进程和线程的区别以下内容带您一步步了解线程是什么比进程更小的独立运行的基本单位-线程(Threads)线程的提出主要是为了提高系统内程序并发执行的程度,从而进一步提升系统的吞吐量,充分发挥多核CPU的优越性而设计的引入进程是为了操作系统更加方便地管理程序,使得多个程序能并发管理和执行而线程则是为了减少程序在并发执

随机推荐