Vue面试题

1、Vue总结

vue的使用方式有两种

方式一:像jQuery一样引入使用--vue的特性都可以使用，双向数据绑定

方式二：跟node结合起来使用，使用的时候有点像java语言（面向对象）

2、为什么要使用vue（使用Vue的好处是什么）？MVVM的框架那么多？MVVM跟MVC有什么区别？MVVM的框架你知道有哪些？

2.1、Vue好处：

vue两大特点：响应式编程、组件化

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

2.2、MVVM定义：
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
3、Vue中有哪些钩子函数？作用是什么？ Vue的生命周期

1 初始化前  --BeforeCreated

2 初始化完成 ---***：发送ajax   --created    //比较常用

3 双向数据绑定前 ---BeforeMount

4 双向数据绑定完成 --Mounted

5 更新前 --BeforeUpdate

6 更新完成--updated

7 销毁前--BeforeDestroyed

8 销毁完成--Destroye

4.vue中methods和computed有什么区别？应用场景如何？

1.methods：方法，函数，绑定事件调用；不会使用缓存

2.computed： 计算属性 本质是方法，使用时可以像属性一样使用， 当操作的值没有发生改变时，会使用缓存，当值发生改变，才会改变；提高速度

5.什么是js的冒泡？Vue中如何阻止冒泡事件

js解决冒泡：event.stopPropagation()

vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

6.Vue中有哪些事件修饰符？各有什么作用

vue中的事件修饰符：.stop 阻止冒泡 .prevent:阻止默认事件

7.为什么data是一个函数

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

8.Vue组件通讯有哪些方式？

1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。

7、vuex 状态管理。

9.怎样理解 Vue 的单项数据流

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。

注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。

如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。

10.Vue 2.0 响应式数据的原理

整体思路是数据劫持 + 观察者模式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已存在的属性），数组则是通过重写数组来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存在它所依赖的 watcher （依赖收集）get，当属性变化后会通知自己对应的 watcher 去更新（派发更新）set。

1、Object.defineProperty 数据劫持
2、使用 getter 收集依赖 ，setter 通知 watcher派发更新。
3、watcher 发布订阅模式。