Vue面试题总结（一）

1，MVVM与MVC的区别

MVVM，View的变动直接反应在ViewModel上，采用是数据双喜那个绑定；
MVC：View传送指令到Controller，Controller完成业务逻辑处理后，要求Model改变状态，Model将新的数据发送到View，用户得到反馈。

2，Vue的核心是什么？

数据驱动，组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

3，vue中的data为什么是一个函数？

为了保证每一个实例的data属性都是独立的，保证对象的唯一性，不会相互影响。如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据

4，vue的双向绑定原理

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

5，Vue的生命周期

beforeCreated()：在实例创建之间执行，数据未加载状态
created()：数据加载之后，dom渲染之前执行
beforeMount()：虚拟dom创建完成，数据渲染前最后一次更改数据
mounted():页面数据渲染完成，真实的dom挂载完成
beforeUpdate():重新渲染之前触发
updated():数据更改完成
beforeDestory():销毁前执行，实例仍然完全可用
destoryed():销毁后执行

6，vue和JQuery的区别

JQuery专注于视图层，通过操作dom去实现页面的一些逻辑渲染；
Vue专注于数据层，通过数据双向绑定，最终渲染在dom层面，减少了dom的操作

7，Vue中key的作用

使用key给每一个节点做一个唯一标识，会根据key的变化重新排列元素顺序，并且会移除key不存在的元素， 有相同父元素的子元素必须有独特的key

8，Vue中怎么自定义过滤器？

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

9，Vue中自定义指令

全局注册：Vue.directive()
局部注册：directives： {}

10，$route和$router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法
$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

11，delete和Vue.delete删除数组的区别

delete只是将元素变成了empty或者是undefined，其他元素的键值还是保持不变的；
Vue.delete直接删除元素，改变数组的键值

12，如何获取dom?

dom中添加ref=“domName” 方法中使用：this.$refs.domName获取

13，vue.cli项目中src目录每个文件夹和文件的用法？

assets：放静态资源；
components：放组件；
router：定义路由相关的配置;
app.vue：一个应用主组件；
main.js：入口文件。

14，computed和watch的使用场景

computed: 当一个属性受多个属性影响的时候就需要用到computed
watch: 当一条数据影响多条数据的时候就需要用watch

15，axios的特点有哪些

从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

16，封装 vue 组件的过程？

1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
4. 封装完毕了，直接调用即可

17，组件通信

父组件向子组件通信：
子组件通过 props 属性，绑定父组件数据，实现双方通信
子组件向父组件通信：
将父组件的事件在子组件中通过 $emit 触发

18， v-if 和 v-show 区别

v-if ：如果值为 false ，那么页面将不会有这个DOM节点。
v-show ：不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display属性在none和block之间切换

19，v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

20，Vue的响应式原理

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据
在使用getter方法时，总会通知wather实例对view层渲染页面
同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新
详情见链接: https://www.jb51.net/article/162232.htm.