Vue一点学习记录
11：03
1、MVC 和 MVVM 区别，是一种软件设计典范
MVC是模型（处理数据逻辑，模型对象负责在数据库中存取数据）、视图（处理数据显示，依据模型数据创建）、控制器（处理用户交互，从视图读取数据，向模型发送数据），一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来
MVVM是模型、视图、ViewModel 层（做了2件事达到数据双向绑定，1.后端数据转化成页面即数据绑定。2.将视图转化成模型即将页面转化成后端数据即DOM事件监听）
MVVM 与 MVC 最大的区别就是：实现了 View 和 Model 的自动同步，Vue数据驱动的思想，不再操作DOM来改变View的显示，不仅简化业务与界面依赖，还解决了数据频繁更新，低耦合模式提高代码可重用性
Vue 并没有完全遵循 MVVM 的思想
严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。
---------------------------------------------------------------------
2、为什么 data 是一个函数
数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，让各个组件实例维护各自的数据。
而单纯的写成对象形式，就所有组件实例共用了一份 data，会造成一个变了全都会变的结果
---------------------------------------------------------------------
3、Vue 组件通讯有哪几种方式
props 和$emit 父组件向子组件传递数据是通过 prop，子组件传递数据给父组件是通过$emit 触发事件来做到的
$parent,$children 获取当前组件的父组件和当前组件的子组件
父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中使用，但是写组件库时很常用)
$refs 获取组件实例
vuex 状态管理
通过slot插槽
---------------------------------------------------------------------
4、Vue 的生命周期方法有哪些 一般在哪一步发请求
beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el,如果非要想与 Dom 进行交互，可以通过 vm.$nextTick 来访问 Dom
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
updated 发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新，该钩子在服务器端渲染期间不被调用。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行善后收尾工作，比如清除计时器。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
---------------------------------------------------------------------
可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
如果异步请求不需要依赖 Dom 推荐在 created 钩子函数中调用异步请求，
能更快获取到服务端数据，减少页面 loading 时间；
---------------------------------------------------------------------
5、v-if 和 v-show 的区别
v-if是通过控制DOM节点的存在与否来控制元素的显隐。切换有一个局部编译卸载过程，切换过程中合适的销毁和重建内部的事件监听和子组件
v-show是通过设置DOM元素的display样式，block为显示，none为隐藏。只是简单的基于css切换
v-if是惰性的，如果初始条件为假则什么也不做，只有在条件第一次变为真时才开始局部编译，v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留
v-show有更高的初始渲染消耗，v-if有更高的切换消耗。
---------------------------------------------------------------------
10、Vue2.0 响应式数据的原理
整体思路是数据劫持+观察者模式
---------------------------------------------------------------------
17、v-for 为什么要加 key
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速
更准确：因为带 key 就不是就地复用了
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快
---------------------------------------------------------------------
18、路由组件懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们当路由被访问的时候才加载对应组件，这样就更加高效。
---------------------------------------------------------------------
21 谈一下对 vuex 的个人理解
是专门为vue提供的全局状态管理系统，用于多个组件中数据共享，数据缓存等
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
---------------------------------------------------------------------
24 使用过 Vue SSR 吗？说说 SSR
SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。
优点：
SSR 有着更好的 SEO、并且首屏加载速度更快
缺点：
开发条件会受到限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。
服务器会有更大的负载需求
---------------------------------------------------------------------
25 vue 中使用了哪些设计模式
1.工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode
2.单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉
3.发布-订阅模式 (vue 事件机制)
4.观察者模式 (响应式数据原理)
5.装饰模式: (@装饰器的用法)
6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略
---------------------------------------------------------------------
你都做过哪些 Vue 的性能优化
对象层级不要过深，否则性能就会差
不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
大数据列表和表格性能优化-虚拟列表/虚拟表格
防止内部泄漏，组件销毁后把全局变量和事件销毁
图片懒加载
路由懒加载
第三方插件的按需引入
适当采用 keep-alive 缓存
组件
防抖、节流运用
服务端渲染 SSR or 预渲染
---------------------------------------------------------------------
27 Vue.mixin 的使用场景和原理
我们经常会遇到在不同的组件中需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
---------------------------------------------------------------------
28 nextTick 使用场景和原理
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM
---------------------------------------------------------------------
29 keep-alive 使用场景和原理
keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性 include/exclude，允许组件有条件的进行缓存。
两个生命周期 activated/deactivated，用来得知当前组件是否处于活跃状态
---------------------------------------------------------------------
34 Vue 模板编译原理
Vue 的编译过程就是将 template 转化为 render 函数的过程 分为以下三步
第一步是将 模板字符串 转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）
---------------------------------------------------------------------
