vue插槽面试题_前端面试题整理—Vue篇

1、对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器

vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统

vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算

特点:简洁轻量、数据驱动、组件化、模块友好

vue.js使用了IE8无法模拟的 ECMAScript 5 特性,没有替代方案

2、简述Vue双向数据绑定的原理

主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的

vue是通过数据劫持的方式来做数据绑定,最核心的方法就是通过Object.defineProperty()来实现对属性的劫持

在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数,达到监听数据变动的目的

3、什么是MVVM,和MVC的区别

MVVM是Model-View-ViewModel的缩写

Model层代表数据模型

View代表组件视图,负责将数据模型转化成UI展现出来

ViewModel是一个同步 View 和 Model 的对象(双向绑定)

在MVVM中,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,

Model和ViewModel之间的交互是双向的,因此 通过视图操作数据,也能通过数据操作视图

MVC是Model-View- Controller的简写。即模型-视图-控制器,使用MVC的目的是为了将M和V相分离

MVVM与MVC最大的区别就是实现了View和Model的自动同步,也就是当Model的属性改变时

我们不用再手动操作Dom来改变View,而是改变后该属性对应View层会自动改变

4、vue.js的两个核心是什么

数据驱动和组件化思想

5、vue与angular的区别

vue的双向邦定是基于ES5中getter/setter来实现的,而angular是由自己实现一套模版编译规则,需要进行所谓的“脏值”检查,vue则不需要

vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面

6、说下vue的底层原理

Vue的模式是m-v-vm模式,即(model-view-modelView),通过modelView作为中间层,进行双向数据的绑定与变化

1)通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树

2)一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化

3)截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据

4)最后通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定

7、简述vue等单页面应用及优缺点

单页面应用,用户所有的操作都在一个页面完成

优点:无刷新,用户体验好,共享资源只需要请求一次即可,采用组件化的思想,代码结构更加规范化,便于修改和调整

缺点:对搜索引擎不友好、低版本不支持,第一次加载首页耗时相对较长,不能使用浏览器导航按钮,需要自行实现前进后退

8、React与Vue对比

相同点:

都支持服务器端渲染、数据驱动视图,状态管理

都有虚拟DOM、组件化开发、通过props参数进行父子组件数据的传递

不同点:

React严格上只针对MVC的C层,Vue则是MVVM模式

虚拟DOM方面

vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树,而React每当应用的状态被改变时,全部组件都会重新渲染

视图渲染方面

React采用JSX渲染到DOM,vue使用的是template模板

数据绑定方面

vue实现了数据的双向绑定,react数据流动是单向的

state对象方面

react应用中不可变的,需要使用setState方法更新状态

vue中,state对象不是必须的,数据由data属性在vue对象中管理

9、前端组件化有什么优势

1)提高开发效率

2)方便重复使用

3)便于协同开发

4)更容易管理维护

10、说一下vue的生命周期,当使用keep-alive属性时,会增加哪两个生命周期

创建前/后beforeCreate/created:

在beforeCreated阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有

载入前/后beforeMount/mounted:

在beforeMount阶段,vue实例的el和data都初始化了,但还是挂载之前为虚拟的dom节点,data尚未替换。在mounted阶段,vue实例挂载完成,data成功渲染。

更新前/后beforeUpdate/updated:

当data变化时,会触发beforeUpdate和updated方法。不常用

销毁前/后beforeDestory/destoryed:

beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件

执行destroy方法后,vue实例已经解除了事件监听以及dom的绑定,但是dom结构依然存在

在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:

activated 与 deactivated

11、说说你对angular脏检查理解

angular中无法判断数据是否做了更改,所以设置了一些条件,当触发这些条件之后就会执行一个检测来遍历所有的数据,对比刚才更改的地方执行变化

这个检查很不科学而且效率不高,有很多多余的地方

12、如何使css只在当前组件起作用

如果想写的css只对当前组件起作用,则在style中写入scoped

13、vue中v-if和v-show的区别

v-if和v-show都是用来控制元素的渲染

v-if是根据后面数据的真假,来判断DOM的添加删除等操作

v-show只是在修改元素的css样式(display属性值)

v-if如果初始渲染条件为真,就渲染,反之就不渲染

v-show不管初始条件是否为真,都会被渲染

v-if有更高的切换消耗,不适合做频繁的切换

v-show有更高的初始渲染消耗,适合做频繁的切换

14、vue有哪些修饰符

事件修饰符:stop、prevent、self、once

键盘修饰符:enter、space、up、down

表单修饰符修饰符:number、trim、lazy

15、列举vue的几种常用指令

v-if、v-show、v-for、v-on、v-bind、v-model、v-once

16、v-on可以绑定多个方法吗?

可以

17、vue中$mount与el区别

$mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中

如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中

没有指定el,则vue实例会处于一种“未挂载”的状态,此时通过$mount来手动执行挂载

18、vue事件修饰符怎么使用,举例说明

...

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目最火的端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了后端分离的开发模式,端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于后端做了分离,真正理解后端的各自承担的工作。端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端:</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端:CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页