VueJs前端面试题整合

vue和react的区别

  • React严格上只针对MVC的view层,Vue则是MVVM模式
  • virtual(虚拟) DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
  • 组件写法不一样,React推荐的做法是 JSX + inline style,也就是把HTML和CSS全都写进JavaScript了,即'all in js';Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件
  • 数据绑定:vue实现了数据的双向绑定,react数据流动是单向的
  • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

redux和vuex的区别

  • vuex是redux的基础上进行改变,对仓库的管理更加明确
  • 使用mutation来替换redux中的reducer
  • vuex有自动渲染的功能,所以不需要更新
  • vuex是专门为vue提供的状态管理工具,而redux是一个泛用的状态管理框架

vuex的实现原理

Vuex的状态存储是响应式的,当Vue组件从store中读取状态时,若store中状态发生改变,响应的组件也会得到更新状态。但不能直接改变state,必须通过显示的提交(commit)mutations来追踪每一个状态的变化

双向数据绑定的原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。 它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。 然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

Vue中父组件如何向子组件传值

父子组件传参:

1.父传子:通过props属性实现;子组件要做类型检测;

2.子传父:

  • 子组件this.$emit触发父组件监听的方法;$emit第二个参数为:向父组件传递的数据
  • 父组件监听子组件触发的事件,然后调用绑定的方法;

非父子组件传参:

  • 路由传值:<router-link>和编程式导航中,均可在query/params中传值,在子组件中:this.$route.query
  • 通过$parent $children方法调用层级关系的组件内部的数据和方法:this.$parent.$data.id  获取父元素data中的id,但是容易造成代码耦合性太强,难以维护
  • eventBus:在全局定义一个eventBus
    window.eventBus = new Vue( )或者Vue.eventBus = new Vue( )
    在需要传递参数的组件中定义一个emit发送需要传递的值:eventBus.$emit(‘name’,id)
    在需要接受参数的组件中,用on接受该值:eventBus.$on(‘name’,(val) => {…})
    注意:使用完后要在beforeDestroy( )中关闭这个eventBus eventBus.$off(‘name’)
  • 本地存储:localStorage或者sessionStorage,setItem存储value,getItem获取value
  • 状态管理 Vuex

列举Vue中的事件修饰符

Vue.js为v-on提供了事件修饰符。
修饰符是由点开头的指令后缀来表示的。
.stop 阻止事件继续传播
.prevent 阻止默认事件
.capture 使用捕获模式
.self 只当事件在该元素本身(而不是子元素)触发时触发回调
.once 事件只会触发一次

vue常用指令有哪些

  • v-on  监听DOM事件,比如v-on:click=”handleFunction”,可简写为 @click
  • v-bind  绑定属性,比如 v-bind:href=”url”,可简写为 : href
  • v-for  循环列表
  • v-if  根据表达式seen的真假来插入/删除对应标签,比如 v-if=”seen”
  • v-else  必须跟在v-if后
  • v-show  根据表达式的真假值来切换元素的display CSS属性
  • v-model  表单元素的数据双向绑定
  • v-text  定义元素文本,比如 v-text=”message”
  • v-html  更新元素的innerHTML
  • v-once  只渲染元素和组件一次

用过哪些基于Vue的组件库?

Element-ui桌面端 mint-ui 移动端
自己总结的

Vue生命周期钩子有哪些,作用是什么

Vue实例从创建到销毁的过程,就是生命周期
Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在Vue的整个生命周期中,提供了一系列的事件,可以注册JS方法,达到控制整个过程的目的,在这些JS方法中的this直接指向的是vue的实例。 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会。

Vue提供的生命周期钩子如下:

  • beforeCreate 在实例初始化之后,数据观测(data observer,开始监控Data对象数据变化)和初始化事件(init event,Vue内部初始化事件)之前被调用。
  • created 在实例已经创建完成之后被调用。实例已完成以下的配置:数据观测(data observer),属性和方法的运算,event事件回调。挂载阶段尚未开始,$el 属性不可见。
  • beforeMount 在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
  • mounted 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中,此时一般可以做一些Ajax操作。注意mounted只会执行一次。
  • beforeUpdate 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
  • updated 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  • beforeDestroy 在实例销毁之前调用。实例仍然完全可用。
  • destroyed 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

自己的总结

v-if和v-show区别

  •  相同点:v-if 和 v-show 动态控制dom元素显示隐藏。
  • 不同点:v-if显示隐藏是将dom元素整个添加或删除,(例如:<div v-if=""></div> ,v-if 当值为 true时,显示div ,当值为false时,改元素消失,代码也会消失,相当于将代码删除了,当在为true时,页面会重新渲染div);而v-show显示隐藏只是将css属性设为display: block 或none。dom元素还在。
  • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换。
  • 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留。
  • 性能消耗:一般的,v-if有更高的切换消耗,而v-show有更多的初始化渲染消耗。
  • 使用场景:如果需要频繁的切换而对安全性无要求,使用v-show。如果在运行时,条件不可能改变,则使用v-if较好。 

watch和computed区别

应用方面,watch比较适合对状态的监控,比如监控页面一个变量的值改变,需要进行什么操作。而computed适合简单计算并返回结果,结果随着内部变量改变而改变。
调用方面,watch适合比较耗时的操作,比如网络异步请求,一个变量改变触发网络请求。watch可以看做一个onchange事件,computed可以看做几个变量的组合体。

Vuex用过哪些方法,你如何在项目中使用它

Store  表示对Vuex对象的全局引用。组件通过Store来访问Vuex对象中的State
State  Vuex对象的状态,即其所拥有的数据
Getter  相当于Store的计算属性。因为就像计算属性一样,Getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。下面会说到具体的使用场景 Mutation  定义了对State中数据的修改操作。组件使用State中的数据的时候并不能直接对数据进行修改操作,需要调用Mutation定义的操作来实现对数据的修改。这也是Vuex定义中所说的用相应的规则来让数据发生变化的具体实现 Action  Mutation中定义的操作只能执行同步操作,Vuex中的异步操作在Action中进行,Action最终通过调用Mutation的操作来更新数据

在vuex中用过dispatch(),commit(),mapstate,mapgetters,mapmutation,mapaction。

在项目中的使用:
首先通过npm install vuex --save   安装vuex
在项目的源代码文件夹下(如src文件夹)新建一个store文件夹(叫别的名字也行)
store文件夹下新建一个store.js文件,用来存放Vuex实例。可以把store注入到在vue实例中,那么所有的组件都可以通过this.$store.state去调用。

流程:vue Components使用dispatch()方法触发action里面的函数,通过在Action里面写公共的异步调用获取数据,供公共的组件渲染。Action使用commit()方法触发mutations里面的函数,Mutations去修改state,state重新render vue Components。

vuex的使用便于大型项目管理,Store包含多个Module,Module包含State、Mutation和Action。

mutation和action写在methods中

getters和state写在computed中

说说Vue.nextTick钩子的应用场景

场景一:在created()钩子函数执行的时候,DOM并未进行任何渲染,这时操作DOM时会报错,这时,在created中使用Vue.nextTick(callback)进行操作即可解决。实际上直接将操作放在mounted钩子中是不会发生这种情况的,因为mounted函数执行时代表DOM已经渲染完毕

场景二:当DOM渲染完成后,执行某些操作改变其结构时,需要把异步结果放在Vue.nextTick(callback)中

其实可以理解为,Vue的数据驱动页面更新并不是数据改变后DOM立即做出响应,Vue 在更新 DOM 时是异步执行的,通过数据更新队列,监听数据变化,从而更新视图。而Vue.nextTick(callback)就是每次DOM渲染后触发的钩子

Vue3.0使用Proxy代替Vue2.0中Obeject.defineProperty的原因

Obeject.defineProperty虽然已经能够实现双向绑定了,但是他还是有缺陷的。只能对属性进行数据劫持,所以需要深度遍历整个对象,对于数组不能监听到数据的变化,虽然Vue中确实能检测到数组数据的变化,但是其实是使用了hack的办法,并 且也是有缺陷的。

反观Proxy就没以上的问题,原生支持监听数组变化,并且可以直接对整个对象进行拦截,所以在Vue3.0中使用Proxy替换 Obeject.defineProperty

简述路由原理

前端路由就是监听 URL 的变化,然后匹配路由规则, 显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式
hash 模式和history 模式

像www.example.com/#/index就是 Hash URL,当 ## 后面的哈希值发生变化时,不会向服务 器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。
而www.example.com/index就是History 模式,它是HTML5新推出的功能,比之HashURL更加美观。

谈谈Virtual Dom(虚拟DOM)的意义及原理

意义:直接通过JS操作DOM对象会对性能损耗很大,此时,我们可以通过JS对象模拟DOM对象,优化性能

原理:

Virtual Dom:如果需要对比两个完整的DOM多叉树,时间复杂度就是O(n^3)。React的核心就是通过diff算法调和,优化Virtual Dom,其团队优化了普通的DOM多叉树比较,将时间复杂度降低至O(n),其核心就是对比同层的节点,而不是跨层对比,Vue2.0中也引入了Virtual Dom算法,它是基于snabbdom算法修改的

Virtual Dom中的Diff算法过程:

首先从上至下,从左往右遍历对象,也就是树的深度遍历,这一步中会给每个 节点添加索引,便于最后渲染差异,一旦节点有子元素,就去判断子元素是否有不同

Virtual Dom算法的实现步骤

  • 通过JS来模拟创建DOM对象
  • 判断两个对象的差异
  • 渲染差异

原文地址:https://blog.csdn.net/time_____

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1==&gt;简述一下src与href的区别 src用于替换当前元素; href用于在当前文档和引用资源之间确立联系 2==&gt;、谈谈以前端角度出发做好SEO需要考虑什么? a.&#160;了解搜
什么是window对象?什么是document对象? window对象代表浏览器中打开的一个窗口。 document对象代表整个html文档。实际上, document对象是window对象的一个属性
1 》vue-router有哪几种导航钩子? 第一种:是全局导航钩子:router.beforeEach(to,from,next) 第二种:&#160;组件内的钩子 beforeRouteEnter
1=&gt;为什么data是一个函数 【理解】 组件的data写成一个函数, 这样每复用一次组件,就会返回一分新的data。 也就说:给每个组件实例创建一个私有的数据空间。 各个组件维护各自的数据。
01 vue3的新特征 1.组合式API. setUp作为组合函数的入口函数 2.Teleport 传送门 3.片段 template下可以有多个标签 4.用于创建自定义渲染器。我的理解是 creat
// var&#160;arr=[1,2,23,23,4,5,5]; // var&#160;newarr=new&#160;Set(arr);&#160;//去重 // console.log([.
摆好姿势 摆好姿势 如何使下面的等式成立 if(a==1&amp;&amp;a==3&amp;a==5){ console.log(666) } var a=[1,3,5] a.join=a.shif
1=&gt;为什么data是一个函数 【理解】 ok 每复用一次组件,就会返回一分新的data。 也就说:【每个组件实例创建】一个【私有】的数据空间。各个组件维护各自的数据。 如果单纯的写成对象形式,
以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正。:) 在网页中,一个元素占有空间
1 Action是不是线程安全的?如果不是 有什么方式可以保证Action的线程安全?如果是,说明原因不是声明局部变量,或者扩展RequestProcessor,让每次都创建一个Action,或者在s
解决js兼容性问题使用 event对象 function eventHandler(event) { event = event || window.event} 获取滚动条属性 var scrollTop = document.documentElment.scrollTop || document.body.scrollTop
浏览器的内核 IE: trident内核,Firefox:gecko内核,Safari:webkit内核,Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核,Chrome:Blink(基于webkit,Google与Opera Software共同开发) HTML中的Doctype有什么作用 此标签可告知浏览器文档使用哪种HTML或XHTML规范。(重点:告诉浏览器按照何种规范解析页面) div+css的布局较table布局有什么...
如何创建函数第一种(函数声明): function sum1(num1,num2){ return num1+num2; } 第二种(函数表达式): var sum2 = function(num1,num2){ return num1+num2; } 第三种(函数对象方式): var sum3 = new Function("num1","num2","return num1+num2");三种弹窗的单词以及三种弹窗的功能1.alert //弹出对话框并输出一段提示信...
js的垃圾回收机制是什么原理垃圾回收机制有两种方法第一种是标记清除法:当变量进入执行环境时,就标记这个变量为”进入环境”,当变量离开环境的时候,则将其标记为”离开环境”,垃圾收集器在运行的时候会给储存在内存中的所有变量都加上标记,然后它会去掉环境中的标量以及被环境中的变量引用的标记,而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了,最后,垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间 第二种是引用计数法:当声明了一个变量并将
Ajax 是什么? 如何创建一个Ajax?AJAX全称是Asychronous JavaScript And Xml(异步的 JavaScript 和 XML)它的作用是用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持其主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果实现方式(gitee上的案例):
谈一谈let与var和const的区别let为ES6新添加申明变量的命令,它类似于var,但是有以下不同: let命令不存在变量提升,如果在let前使用,会导致报错let暂时性死区的本质,其实还是块级作用域必须“先声明后使用”的性质,let 暂时性死区的原因:var 会变量提升,let 不会。let,const和class声明的全局变量不是全局对象的属性const可以在多个模块间共享const声明的变量与let声明的变量类似,它们的不同之处在于,const声明的变量只可以在声明时赋值,不可
解释一下为何[ ] == ![ ] // ---&gt; true首先看一张图![ ] 是 false原式:[ ] == false根据第八条,false通过tonumber()转换为0原式:[ ] == 0根据第十条,[ ]通过ToPrimitive()转换为' '原式:' ' == 0根据第六条原式:0 == 0尝试实现new function ObjectClass() {//对象 console.log(arguments[...
谈谈对Node的理解Node.js 在浏览器外运行V8 JavaScript引擎,单线程 非阻塞I/O 事件驱动,适应于数据高并发,适合多请求,但不适合高运算,有权限读取操作系统级别的API,npm 仓库,常用框架:Express,koa,Socket.io,AdonisJs,NestJS什么是gulp?作用?机制是什么?gulp是基于node的自动化构建工具作用:1 自动压缩JS文件2 自动压缩CSS文件3 自动合并文件4 自动编译sass5 自动压缩图片6 自动刷
vue和react的区别React严格上只针对MVC的view层,Vue则是MVVM模式virtual(虚拟) DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制组件写法不一样,React推荐的做法是 JSX + inline style,也就是把HTML和CSS全都写进JavaScript了,即'all in
谈谈对react的理解react是基于v(视图层)层的一款框架,虚拟dom和diff算法react特点:声明式设计高效,其中高效以现在虚拟dom,最大限度减少与dom的交互和diff算法灵活,体现在可以与已知的框架或库很好的配合JSX,是js语法的扩展组件化,构建组件,是代码的更容易得到复用,比较建议在大型项目的开发单项数据,实现单项数流,从而减少代码复用react有哪几个生命周期自己的总结分为三个阶段,初始,运行中,销毁初始化: 执行getDefaultProps钩子