vue面试题

1.vue.js的两个核心是什么？

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

2.双向数据绑定的原理？

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

3. v-if和v-show有什么区别？

v-show 仅仅控制元素的显示方式，将display属性在block和none来回切换；而v-if会控制这个Dom节点的存在与否。
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

4. methods，computed和watch的区别？

methods：重要重新渲染，method调用总会执行该函数。

computed:相当于一个具备缓存的watcher，计算属性是根据它的相关依赖进行缓存，只有它的相关依赖发生改变，它才会重新求值。

Watch:没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。
当我们需要深度监听是需要用：deep:true
初始化监听：immediate:true

5. 说?下你对单向数据流的理解？

单向数据流主要是vue 组件间传递数据是单向的，即数据总是由父组件传递给子组件，子组件在其内部维护自己的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的维护。在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据。

6.data为什么是一个函数？

避免组件中的数据互相影响，同一个组件被复用多次后会创建多个实例，如果data是一个对象的话，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

7. vue中 keep-alive 组件的作用

作用：
用于保留组件状态或避免重新渲染（缓存的作用）
比如：
当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用 <keep-alive></keep-alive> 进行缓存，这样用户每次返回目录时，都能从缓存中快速渲染，而不用重新渲染。

1、属性：
include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude：字符串或正则表达式。任何匹配的组件都不会被缓存。
2、两个生命周期：
activated和deactivated
用来得知当前组件是否处于活跃状态
3、用法：
包裹动态组件时，会缓存不活动的组件实例，?不是销毁它们。和 <transition>相似，<keep- alive>是?个抽象组件：它?身不会渲染?DOM 元素，也不会出现在?组件链中。

当组件在<keep-alive> 内被切换，在 2.2.0 及其更?版本中，activated 和 deactivated? 命周期将会在树内的所有嵌套组件中触发。

8.ref的作用？

获取dom元素：this.$ref.box
获取子组件中的this：this.$refs.box.msg
调用子组件中的方法：this.$refs.box.open()

9.params和query的区别？

引入方式不同： query要使用path来引入，params要使用name来引入，接受参数格式类似，引用分别是this.$route.query.name和this.$route.params.name
形成的路径不同（或者url地址显示不同）：使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。
params传递后形成的路径： /router/123,/router/zhangsan query传递后形成的路径：
/router?id=666&name=zhangsan
是否受动态路径参数影响 Query传递的参数不会受路径参数的影响，会全部展示到路径上，刷新不会丢失query里面的数据； params传递的参数会受路径参数的影响，只会展示含有动态路径参数的部分，刷新会丢失没有设置动态路径参数的params的数据。

10.谈谈你对MVVM开发模式的理解?

MVVM分为Model、View、Viewmodel三者。
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展开；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；
总结： Model和View并无直接关联，而且通过Viewmodel来进行联系的，Model和Viewmodel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。