vue的一些基础知识（涉及面试题）

小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控s和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。

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）