前端面试题---vue部分
1.vue的两大核心思想
组件化和数据驱动
2.如何理解vue中的MVVM模式
Model-View-ViewModel(简称为mvvm)是一种设计思想,model层代表数据模型,也可以再model中定义数据、修改、操作业务逻辑。view层代表ui组件,它负责将数据模型转换为UI展现出来。viewmodel通过双向数据绑定把view层和model层连接起来,而view和model之间的同步工作完全是自动的,无需人为干涉。
因此开发者只需要关注业务逻辑,不需要手动操作Dom,不需要关注数据状态的同步问题,复杂的数据状态维护完全由mvvm来统一管理。
3.vue的有点是什么?
- 低耦合:试图(view)可以独立于model变化和修改,一个viewmodel可以绑定到不同的“view”上,当“view”变化的时候“model”可以不变,当“model”变化的时候“view”也可以不变。
- 可重用性:可以把一些试图逻辑放在一个viewModel里面,让很多view重用这段试图逻辑。
- 独立开发:开发人员专注于业务逻辑和数据的开发,设计人员专注于页面设计。
- 可测试:界面素来较难测试,而现在测试可以针对viewmodel来写。
4.vue中<keep-alive>的作用是什么?
包裹动态组件,把切换出去的数组保留在缓存中,可以保留组件的状态或者避免重新渲染
5.vue使用v-for的时候key的作用
使用v-for当数据重新排列数据时会复用已在页面渲染好的元素,不会移动DOM元素来匹配数据项的顺序,需要通过key特性设置唯一的值来标记以让vue区分它们,以便它能跟踪每个节点的身份,从而复用和重新排现有元素。
5.vue路由的钩子函数
vue-router中的导航钩子,主要用来拦截导航让它完成跳转或取消,有多种方式可以在路由导航发生时执行钩子,比如全局的、单个路由独享的、或者组件级的。
- 全局钩子 (主要包括beforeEach和afterEach)
- beforeEach函数有三个参数
- to:router即将进入的路由对象
- from:当前导航即将离开的路由
- next:function进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed ;否则为false,终止导航。
- afterEach函数
- 不用传next函数,一般用来判断权限,以及页面丢失时候需要执行的操作
const router = new VueRouter();
router.beforeEach((to,from,next)=>{.....})
- beforeEach函数有三个参数
- 单个路由独享的钩子
- 主要用于写某个指定路由跳转时需要执行的逻辑
const router = new VuePouter({
routers:[
{
path:'/todolist',
component:'todolist',
beforeEnter:(to,from,next) => {...},
beforeLeave:(to,from,next) => {...}
}
]
})
- 组件内的钩子
- 主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.
6.vue中Dom的操作问题
vue中的DOM是虚拟的,一般编写代码的时候不需要操作DOM元素,但也会遇到一些情况需要操作DOM
- vue的实例挂载在一个DOM元素上,通过this.$el获取el选项挂载的DOM元素
- 通过ref操作DOM,ref被用来给元素或者子元素注册引用信息。引用信息将会注册在父元素的$refs对象上
7.MVVM和MVC的区别?哪些场景适合
MVVM和MVC其实区别并不大,都是一种设计思想。主要就是mvc中Controller演变成mvvm中的ViewModel。mvvm主要解决了mvc中的大量的DOM操作使页面渲染功能降低,加载速度变慢。影响用户体验。
区别:vue数据驱动。通过数据来显示试图而不是节点操作
场景:数据操作比较多的场景,更加便捷
8.v-if 和 v-show 指令的共同点和不同点
v-show指令是通过修改元素的display的css属性让其显示或者隐藏;
v-if 指令是直接销毁和重建DOM达到让元素显示和隐藏的效果;
使用v-show 会更加节省性能上的开销,当只需要一次显示或隐藏的时候,使用v-if更加合理
前端面试题---vue部分的更多相关文章
- 前端面试题 vue
webpack 作用:webpack是把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别 ...
- 2019前端面试题汇总(主要为Vue)
摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...
- Vue 前端面试题
Vue 前端面试题 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() ...
- 前端面试题汇总(主要为 Vue)
前端面试题汇总 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. 1)Model:代表数据模型,数据和业务逻辑都在Model层中定义: 2)View:代 ...
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue 前端面试题[转]
https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNw Vue 前端面试题 游荡de蝌蚪 前端开发 1周前 作者:游荡de蝌蚪 https://segmen ...
- 前端面试题(VUE)
(前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...
- 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
随机推荐
- nodeJs 操作Mysql数据库
nodeJs下操作数据库需要安装npm模块: mysql npm install mysql --save-dev 新建express项目 express --view=ejs 在项目根目录下新建数据 ...
- rest_famework 增删改查初第二阶段(中级,此阶段是优化初级阶段的代码)的使用
url: re_path('authors/$', views.AuthorView.as_view()),re_path('authors/(\d+)/$', views.AuthorDetailV ...
- Mybatis pageHelper.startPage(...)是物理分页
使用PageHelper.startPage(...)进行物理分页 业务需求只显示其中的100条数据 之前是在业务逻辑里对参数limit进行了处理 后来试试sql的limit查询100条数据 但是不确 ...
- JEECG 3.7.8 新版表单校验提示风格使用&升级方法(validform 新风格漂亮,布局简单)
JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统.jeecg这个自定义的校验提示风格,不占用页面布局,提示效果也更美观,简单易用,让表单看起来更漂亮!!! ...
- Mysql分表:Merge
merge是Mysql最简单的一种分表,Mysql自带的一个分表功能,Merge表并不保存数据,Merge表和分表是对应映射关系.demo: 创建分表:CREATE TABLE `user1` ( ` ...
- Mac+sublime text+skim
首先:安装Mac Tex .Sublime.skim MacTex: https://tug.org/mactex/mactex-download.html Sublime3 : http:// ...
- 数据结构——串(KMP)
空串:长度为0的串 空格串:由一个或多个空格组成的串 串常用的3种机内表示方法: 定长顺序存储表示: 用一组地址连续的存储单元存储串的字符序列,每一个串变量都有一个固定长度的存储区,可用定长数组来描述 ...
- xfs 的一些工具使用
[root@localhost caq]# xfs_db -c frag -r /dev/sdaw actual , ideal , fragmentation factor 82.56% Note, ...
- git 琐碎
git symbolic-ref --short HEAD 来获取对应 HEAD 的分支名 ➜ mis-gulf git:(mis-lk) ✗ git symbolic-ref --short HEA ...
- 解决matplotlib中文显示
网上搜的很多方法都不是很好用,这里找到了一个比较好用的办法. 首先将win上的中文字体复制到linux目录下面,我这里使用的是simhei.ttf.然后参考如下代码的使用方式: import matp ...