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)=>{.....})
  • 单个路由独享的钩子
    • 主要用于写某个指定路由跳转时需要执行的逻辑
    • 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部分的更多相关文章

  1. 前端面试题 vue

    webpack 作用:webpack是把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别 ...

  2. 2019前端面试题汇总(主要为Vue)

    摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...

  3. Vue 前端面试题

    Vue 前端面试题 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() ...

  4. 前端面试题汇总(主要为 Vue)

    前端面试题汇总 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. 1)Model:代表数据模型,数据和业务逻辑都在Model层中定义: 2)View:代 ...

  5. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. Vue 前端面试题[转]

    https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNw Vue 前端面试题 游荡de蝌蚪 前端开发 1周前 作者:游荡de蝌蚪 https://segmen ...

  7. 前端面试题(VUE)

    (前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...

  8. 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解

    1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...

  9. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

随机推荐

  1. nodeJs 操作Mysql数据库

    nodeJs下操作数据库需要安装npm模块: mysql npm install mysql --save-dev 新建express项目 express --view=ejs 在项目根目录下新建数据 ...

  2. rest_famework 增删改查初第二阶段(中级,此阶段是优化初级阶段的代码)的使用

    url: re_path('authors/$', views.AuthorView.as_view()),re_path('authors/(\d+)/$', views.AuthorDetailV ...

  3. Mybatis pageHelper.startPage(...)是物理分页

    使用PageHelper.startPage(...)进行物理分页 业务需求只显示其中的100条数据 之前是在业务逻辑里对参数limit进行了处理 后来试试sql的limit查询100条数据 但是不确 ...

  4. JEECG 3.7.8 新版表单校验提示风格使用&升级方法(validform 新风格漂亮,布局简单)

    JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统.jeecg这个自定义的校验提示风格,不占用页面布局,提示效果也更美观,简单易用,让表单看起来更漂亮!!! ...

  5. Mysql分表:Merge

    merge是Mysql最简单的一种分表,Mysql自带的一个分表功能,Merge表并不保存数据,Merge表和分表是对应映射关系.demo: 创建分表:CREATE TABLE `user1` ( ` ...

  6. Mac+sublime text+skim

    首先:安装Mac Tex .Sublime.skim MacTex:   https://tug.org/mactex/mactex-download.html Sublime3 :  http:// ...

  7. 数据结构——串(KMP)

    空串:长度为0的串 空格串:由一个或多个空格组成的串 串常用的3种机内表示方法: 定长顺序存储表示: 用一组地址连续的存储单元存储串的字符序列,每一个串变量都有一个固定长度的存储区,可用定长数组来描述 ...

  8. xfs 的一些工具使用

    [root@localhost caq]# xfs_db -c frag -r /dev/sdaw actual , ideal , fragmentation factor 82.56% Note, ...

  9. git 琐碎

    git symbolic-ref --short HEAD 来获取对应 HEAD 的分支名 ➜ mis-gulf git:(mis-lk) ✗ git symbolic-ref --short HEA ...

  10. 解决matplotlib中文显示

    网上搜的很多方法都不是很好用,这里找到了一个比较好用的办法. 首先将win上的中文字体复制到linux目录下面,我这里使用的是simhei.ttf.然后参考如下代码的使用方式: import matp ...