vue知识框架整理

1、概念

1）是什么
Vue是一套轻量级的前端渐进式框架，"渐进式"可以理解为按需引入，根据业务场景逐步从简单实现到复杂实现。
2）实例化
new Vue()的过程就叫函数的实例化。
Vue构造器要求在实例化时传入一个选项对象，选项对象包含挂载元素（el）、数据（data）、方法（methods）、模板（tamplate）、生命周期钩子函数等选项。
3）MVVM
MVVM（Model-View-ViewModel）：是一种前端开发架构模式，核心是数据的双向绑定。
双向绑定：创建Vue实例时，传入了一个选项对象。选项对象的el属性指向View，data属性指向Model，这样就实现了双向绑定。
ViewModel：是一个Vue实例，它是Vue.js的核心。当View层中的DOM元素和Model中的数据绑定成功后，ViewModel中的DOM Listeners工具会监测View层中DOM的变化，并同步更新Model。当Model中数据变化时，Data Bindings工具会同步更新View中的DOM元素。
4）生命周期
Vue生命周期即Vue实例从创建到销毁的过程，可分为8个阶段，这些函数是生命周期钩子函数
beforeCreate（创建前）：在实例开始初始化时同步调用，此时数据观测、事件等尚未初始化
created（创建后）：在实例创建之后调用，此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中【使用场景：Ajax异步请求接口，进行数据初始化】
beforeMount（载入前）：在mounted之前运行
mounted（载入后）：在编译结束时调用，此时所有指令已经生效，数据变化已能触发DOM更新，但不保证$el已插入文档【使用场景：获取挂载元素内DOM节点】
beforeUpdate（更新前）：在实例挂载之后，再次更新实例（如更新data）时调用，此时尚未更新DOM结构
updated（更新后）：在实例挂载之后，再次更新实例并更新完DOM结构后调用【使用场景：处理数据更新的统一业务逻辑】
beforeDestroy（销毁前）：在开始销毁实例时调用，此时实例仍然有效
destroyed（销毁后）：在实例销毁后调用，此时所有绑定和实例指令都已经解绑，子实例也被销毁

2、指令与事件

1）指令
概念：带有v-前缀的特殊属性，其职责是当表达式的值改变时相应地将某些行为应用到DOM上。
常见指令：v-if、v-for、v-show、v-bind、v-model、v-on
2）事件
概念：可以通过v-on指令（如v-on:click）监听DOM事件来触发JS代码调用。
常见事件：监听事件、方法事件处理器、内联事件处理器、事件修饰符、按键修饰符

3、组件与路由

1）组件
component，可以扩展HTML元素，封装可重用模块。传统开发模式中，一般只有考虑代码复用时才封装组件，但在应用类UI中，完全可以将页面看着为组件树构成
2）路由
可通过路由插件vue-router实现，可构建单页面应用。
没有路由前，前端一般通过a标签或者后端实现跳转。

4、渲染函数

1）概念：渲染函数就是Render函数，它会返回一个VNode，VNode是一个JavaScript对象，是DOM的映射（虚拟DOM）。
2）虚拟DOM：其工作是将浏览器DOM节点的所有信息映射到一个JavaScript对象上。因为JS本身很快，但是DOM操作很慢，所以使用虚拟DOM就无需直接操作DOM结构，而虚拟DOM会选择最优方案操作，性能更高。使用虚拟DOM，Vue会把所有的DOM操作缓存到一个队列中，在缓存时去除重复数据，避免不必要的计算和DOM操作
3）使用场景：Vue中通常使用template创建HTML，但某些场景也会需要直接使用JS编码，render可以结合createElment函数使用