设为首页 - 加入收藏 延安站长网 (http://www.0911zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 学习 泄露 约谈 证实
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间:2019-02-25 09:40 所属栏目:[优化] 来源:前端小酱
导读:毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。 刚来3天,面

毕业之后就在一直合肥小公司工作,没有老司机、没有技术氛围,在技术的道路上我只能独自摸索。老板也只会画饼充饥,前途一片迷茫看不到任何希望。于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧。。。。

刚来3天,面试了几家公司,有些规模比较小,有些是创业公司,也有些已经发展的不错了;今天把最近的面试题目做个汇总,也给自己复个盘,由于我的技术栈主要为Vue,所以大部分题目都是Vue开发相关的。

1. 谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model 代表数据模型,数据和业务逻辑都在Model层中定义;

View 代表UI视图,负责数据的展示;

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;

Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 dom。

2. Vue 有哪些指令?

v-html、v-show、v-if、v-for等等

3. v-if 和 v-show 有什么区别?

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。

4. 简述Vue的响应式原理

当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

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

5. Vue中如何在组件内部实现一个双向数据绑定?

假设有一个输入框组件,用户输入时,同步父组件页面中的数据

具体思路:父组件通过 props 传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:

  1. import Vue from 'vue'  
  2. const component = {  
  3.   props: ['value'],  
  4.   template: `  
  5.     
      
  6.         
  7.     
  
  •   `,  
  •   data () {  
  •     return {  
  •     }  
  •   },  
  •   methods: {  
  •     handleInput (e) {  
  •       this.$emit('input', e.target.value)  
  •     }  
  •   } 
  • }  
  • new Vue({  
  •   components: {  
  •     CompOne: component  
  •   },  
  •   el: '#root',  
  •   template: `  
  •     
      
  •         
  •     
  •   
  •   `,  
  •   data () {  
  •     return {  
  •       value: '123'  
  •     }  
  •   }  
  • }) 
  • 可以看到,,当输入数据时,父子组件中的数据是同步改变的:

    我们在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢?答案是可以的,你只需要修改父组件:

    1. template: `  
    2.     
        
    3.         
    4.         
    5.     
      
  •   ` 
  • v-model 实际上会帮我们完成上面的两步操作。

    6. Vue中如何监控某个属性值的变化?

    【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

    相关内容
    网友评论
    推荐文章
    热点阅读
    随机内容