Vue知识点(面试提问)（持续更新中）

一：Vue中，MVVM是什么
1，先将含义
Model 层: 数据模型层
View 层: 视图层
ViewModel 层: 视图模型层
ViewModel 层是MVVM的核心
2，讲通信实现过程：
它有两个方向：
1，：数据变化，视图自动更新变化：ViewModel会利用object.defineProperty进行数据劫持，也就是监听数据的改变，数据发生改变，视图也自动更新改变
2，：视图改变，数据自动更新改变：会监听双向绑定表单DOM元素的变化，一旦变化，绑定的数据也会发生变化

二：v-show与v-if的区别
1，先讲作用：
条件渲染，用来控制元素的显示与隐藏
2，讲区别：
v-if：动态的创建DOM，动态的移除DOM
v-show：通过css中的display样式属性，来控制DOM的显示与隐藏

v-if：在条件为否的时候，什么也不做，在条件为真的时候，才会渲染元素
v-show：无论条件是什么，都会渲染元素，表面的显示与隐藏，只是简单地基于css样式

v-if：更高的元素切换消耗
v-show：初始渲染消耗高

3，讲适用场景：
v-if：适用于运行时，很少改变条件，很少的操作
v-show：适用于对元素的频繁切换操作

三：Vue中:key的作用
1，先讲场景：
使用v-for数据渲染成列表，如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，
2，讲作用：
这时使用:key来作为列表元素的唯一标识，默认就地复用，更高效的渲染虚拟DOM

四：Vue如何检测数组的变化的
1，先说明：vue2不能检测到，但vue3 是可以检测到的,
2，说一下：场景：
vue不能检测数组的动态变化，如删除数组中的元素，添加等
vue不能检测到对数组的长度进行修改
3，解决办法：
变更方法：
重写data中数组的原型方法，指向自己定义的原型数组方法
变更方法有，pop，unshift，shift，push，reserve，splice等
使用vue.set方法,
给vue中添加一个响应式property方法

五：computed 和 watch 以及 methods 的区别
根据场景+缓存+使用
computed：依赖于其他数据计算得来的，可以监听依赖数据的变化，一进入页面就会触发，并且有缓存
methods：依赖于事件的触发，它没有缓存，
watch：监听数据，也可以监听路由的改变，数据发生改变才会调用，可以得到现在的值和之前的值，不支持缓存

六：对vue生命周期的理解：
四个阶段：初始化，挂载，更新，销毁
八个钩子函数：
beforecreate：创建了一个vue空实例，data，methods还没有初始化
created：data，methods等初始化完成，可以进行操作
beforemounte：模板解析，形成虚拟DOM，但还不能操作DOM
mounted：真实DOM替换虚拟DOM，挂载完成，可以操作DOM
beforeupdate：数据发生改变，但是页面上的数据还没有更新过来，这时获取不到改变的数据
updated：页面的数据和data的数据已经保持同步
beforedestroy：此时data，methods，指令等还处于可用状态，并没有真实的销毁
destroy：此时组件已经被完全销毁，不能使用data，指令，methods等

七：谈谈对 keep-alive的理解
1，具体的含义：切换路由，相应的组件会被重新创建渲染，而keep-alive可以阻止组件的重新渲染，而是把这个组件缓存起来，使用keep-alive会触发两个钩子函数，activated和deactivated，也就是组件被激活，也就是进入组件，组件失去激活，离开该组件，
2，好处：减少组件的重新渲染创建销毁，提高性能

3，keep-alive还有两个属性：可以用来过滤路由组件
include: 字符串或正则表达式，只有匹配的组件会被缓存
exclude:字符串或正则表达式，任何匹配的组件都不会被缓存

八，组件中的data为什么是一个函数
组件是用来复用的，并且js里的对象是引用类型
如果data是一个对象，data值修改，那么组件内的data也会受到影响
如果是一个函数，data所返回的数据也是给当前组件内使用，自己独有的，其他引用组件不会受到影响

九：vue组件通信有哪几种方式：
1，父传子：子用props接收,
2，子向父传：恰当的时机用this.$emit来传递给父
3，vuex
4，父子组件通讯：通过ref获取子组件实例，即可获取到子组件内的方法，属性，数据

十：vuex提供了那些核心方法
1，说一下vuex是什么：
它是专门为vue.js引用开发的状态管理模式，它以把组件内的共同状态集中到一起进行管理,
2，它有五个核心方法：
state，mutations，actions，getters，module
state：统一集中管理组件的公共状态
mutations:专门来改变state里面的状态，也是唯一途径
actions：可以用于异步操作，它只能提交mutations里的方法来更改state里的状态
getters：相当于计算属性，用于对state里面的数据进行提取，缓存
modules:把state分成其他模块，每个模块有自己的核心方法，以及状态值，这样不会全部单一的堆积到一个state里面，分类好管理

十一：问到vuex的使用流程，直接按上面的回答即可

十二：vue是如何实现双向绑定原理的

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

十三：说说你对nextTick的理解
首先，数据驱动视图更新是一个异步操作，并不是在修改数据的时候，就立马更新视图，如果在那时操作DOM元素是获取不到的，只能返回一个undefined，
所以我们可以使用nextTick，等到DOM完成更新，渲染成功后，就会立即触发nextTick方法里的回调

十四：你对vue项目进行了那些优化：

1，路由懒加载：webpack打包后，包的代码体积太大，会影响页面加载，例如首页加载会出现白屏，这时，我们把路由对应的组件分割成不同的代码块，只有路由访问的时候，再去加载这些代码块
2，v-if与v-show场景的合理使用
3，图片资源懒加载
4，第三方插件按需引入
5，防抖与节流
6，webpack的极致压缩
7，CDN的使用

待更新中~~~~~~~

代码层面的优化
webpack层面的优化
基础的web技术的优化