vue的一些基础知识(涉及面试题)

1、对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

  • Model 代表数据模型,数据和业务逻辑都在Model层中定义;
  • View 代表UI视图,负责数据的展示;
  • ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;

Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。

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

2、vue有哪些常见的指令?

  • v-html
  • v-show
  • v-if
  • v-on
  • v-for
  • 等等

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

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;

而v-if会控制这个 DOM 节点的存在与否。当只需要一次显示或隐藏时,使用v-if更加合理。

4、简述vue的响应式原理

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

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

image.png

5、vue中如何在组件间进行通信?

父组件通过 props 传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值

在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。v-model 实际上会帮我们完成上面的两步操作。

6、vue如何监控某个属性值的变化?

Vue中监控对象属性的变化你可以这样:

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true // deep属性表示深层遍历
    }
  }
// 监控data中,obj.a 的变化
watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

也可以通过computed 来实现:

// 利用计算属性的特性来实现
// 当依赖改变时,便会重新计算一个新值
computed: {
    a1 () {
      return this.obj.a
    }
}

7、vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?

会发生属性添加成功,但是视图并未刷新的现象
原因:在Vue实例创建时,新添加的变量并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api $set()

this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)

$set()方法相当于手动的去把新添加的对象处理成一个响应式的属性,此时视图也会跟着改变

8、delete和vue.delete删除数组的区别

  • delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
  • Vue.delete或者说是this.$delete:直接删除了数组 改变了数组的键值。
    var a=[1,2,3,4]
    var b=[1,2,3,4]
    delete a[1]
    console.log(a)
    this.$delete(b,1)
    console.log(b)
// [1, empty, 3, 4]
// [1, 3, 4]

9、如何优化SPA应用的首屏加载速度漫的问题?

  • 将公用的JS库通过script标签外部引入,减小app.bundel的大小,让浏览器并行下载资源文件,提高下载速度
  • 在配置路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件
  • 加一个首屏 loading 图,提升用户体验

10、前端如何优化网站性能?

减少 HTTP 请求数量

在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。
浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。
而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许的并发数不同),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态
解决方法

  • CSS Sprites:国内俗称 CSS 精灵,这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案,可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
  • 合并 CSS 和 JS 文件:现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。
  • 采用 lazyLoad:俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。
控制资源文件加载优先级

浏览器在加载 HTML 内容时,是将 HTML 内容从上至下依次解析,解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容,为了第一时间展示页面给用户,就需要将 CSS 提前加载,不要受 JS 加载影响。
一般情况下都是 CSS 在头部,JS 在底部。
解决方法:

  • 利用浏览器缓存
  • 减少重排(Reflow):重排是 DOM 的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的 visibility 属性,这也是 Reflow 低效的原因。如果 Reflow 的过于频繁,CPU 使用率就会急剧上升。尽量使用 增加 class 属性,而不是通过 style 操作样式
  • 图标使用 IconFont 替换

11、网页从输入网址到渲染完成经历了哪些过程?

  • 输入网址
  • 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址
  • 与web服务器建立TCP连接
  • 浏览器向web服务器发送http请求
  • web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址)
  • 浏览器下载web服务器返回的数据及解析html源文件
  • 生成DOM树,解析css和js,渲染页面,直至显示完成

12、jQuery获取的dom对象和原生的dom对象有何区别?

js原生获取的dom是一个对象
jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合

原生DOM对象转jQuery对象:

var box = document.getElementById('box');
var $box = $(box);

jQuery对象转原生DOM对象

var $box = $('#box');
var box = $box[0];

13、jQuery如何扩展自定义方法

(jQuery.fn.myMethod=function () {
       alert('myMethod');
})

或者

(function ($) {
        $.fn.extend({
             myMethod : function () {
                  alert('myMethod');
             }
        })
})(jQuery)

使用方式:

$("#div").myMethod();

参考原文: 2019前端面试题汇总(主要为Vue)

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 12,494评论 0 36
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 3,320评论 1 46
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 2,934评论 0 30
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 7,653评论 5 126
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 1,960评论 0 6