vue.js常见面试题总结

1.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

1. 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
2. 基于上面一点，SPA 相对对服务器压力小；
3. 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

1. 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
2. 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
3. SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

2.什么是MVC和MVVM？

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。

1. Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
2. View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
3. ViewModel 是一个同步View 和 Model的对象（桥梁）。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

3.mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

4.vue中常用的指令及作用？

1. v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的
2. v-html指令：绑定一些包含html代码的数据在视图上
3. v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性
4. v-if指令：取值为true/false，控制元素是否需要被渲染
5. v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
6. v-for指令：遍历data中存放的数组数据，实现列表的渲染。
7. v-bind指令：用于动态绑定DOM元素的属性;例如 标签的href属性，标签的src属性等。v-bind可以简写成“：”
8. v-on指令：可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中定义的方法，v-on:简写为@
9. v-model指令：用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。
10. v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

5.v-for为什么使用key？

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

6.vue的v-if与v-show的区别？

共同点：

v-if 和 v-show 都可以用来动态显示DOM元素。

区别：

• 编译过程： v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
• 编译条件： v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 性能消耗： v-if有更高的切换消耗。v-show 有更高的初始渲染消耗。
• 应用场景： v-if适合运行时条件很少改变时使用。v-show 适合频繁切换。

7.vue数据双向绑定的实现原理以及实现步骤

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

实现步骤：

**第一步：**需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

**第二步：**compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

**第三步：**Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性主题对象(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

**第四步：**MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

8.vue中的事件修饰符主要有哪些？分别是什么作用

• .stop: 阻止事件冒泡
• .native: 绑定原生事件
• .once: 事件只执行一次
• .self:将事件绑定在自身身上，相当于阻止事件冒泡
• .prevent: 阻止默认事件
• .caption: 用于事件捕获

9.vue的优点是什么？

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

10.v-on 可以监听多个方法吗？

v-on 可以监听多个方法，但是同一种事件类型的方法，v-on 只能监听一个。

<div id="app">
        <input type="button" value="绑定多个事件" v-on="{ mousedown: doThis, mouseup: doThat }">
        <!-- v-on 可以同时绑定多个事件 -->
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "llr"
                }
            },
            methods: {
                doThis() {
                    console.log("mousedown")
                },
                doThat() {
                    console.log("mouseup")
                }
            }
        })

11.VUE组件中的data必须是函数？

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；

JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

12.vue和jQuery的区别？

jQuery是使用选择器($)选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。vue是一个MVVM框架。

13.vue如何获取并操作DOM元素

1. 直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式

2. 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

3. 通过自定义指令获取DOM

   Vue.directive("red", {
        //bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        bind: function (el) {
             console.log(el)  //el指令挂载的元素
             el.style.color = "red"
         }
   })
   

14.watch如何实现深度监听?

watch: {
	obj: {
		handler: function(val) {
		},
		deep: true // 深度监听
	}
}

15.watch和computed的区别?

1. watch作用通常是由一个值影响多个值的改变并且能监听到这个值变化时，会去执行一个回调函数，此时我们可以在这个回调函数中做一些逻辑处理
2. computed是根据依赖的值衍生出一个新的值，并且依赖的值可以有多个，只有当被依赖的值发生改变时，才会重新去执行计算

16.Vue的生命周期钩子函数介绍

vue生命周期共分为四个阶段
一：实例创建
二：DOM渲染
三：数据更新
四：销毁实例

共有八个基本钩子函数
1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件

2.created --创建后
触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前
触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。

4.mounted --渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate --更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。

6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

17.Vue父组件和子组件生命周期的顺序

1.渲染过程顺序：

父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()

2.更新过程顺序：

父组件更新过程：
父组件beforeUpdate() -> 父组件updated()
子组件更新过程：
父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()

3.销毁过程

父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()

18.vue-router hash 模式和 history 模式有什么区别？

1. url 展示上，hash 模式有“#”，history 模式没有
2. 刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
3. 兼容性。hash 可以支持低版本浏览器和 IE。

19.vue-router hash 模式和 history 模式是如何实现的？

hash 模式：
#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面。同时通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。

20.$route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。