潜入理解MVVM＆Vue

关于MVVM

MVC

MVC即为Model + View + Controller的一种软件架构。View为前端视图，和用户直接打交道的；Model是数据模型，能够理解为数据库持久化存储；Controller即为链接Model和View之间的业务逻辑控制器。

• 当用户在View视图页面修改了数据，经过Controller控制器完成对Model对象的更新、修改。
• 用户请求某url，也是经过Controller访问数据的
• 整个流程能够这么理解：View前端界面更新-Controller控制器处理-更新Model数据-数据更新后经过Controller返回View-View页面中体现出更新

MVVM

当前端业务逻辑不断扩大···前端数据、业务更加复杂的时候，DOM操做确定会增长若是按照之前的方式直接操做DOM性能会差。因而前端大佬们将数据Model与页面View分离，当数据更新的时候DOM自动更新，若是页面有更新Model也要同步更新，MVVM模式应运而生。在学习软件工程的时候，咱们知道要下降耦合，将Model、View分离也是在解耦操做。

MVVM = Model + View + ViewModel

MVVM作的是将View与Model之间联系完全剥离，任何数据同步都交由ViewModel处理。对视图的修改以及数据的更新都经过ViewModel实现同步。

Vue双向绑定的原理（Vue不支持IE8的缘由）

何为双向绑定

• 视图更新会同步更新Model
• 同时Model更新也会在视图上同步

双向绑定的原理

• Observer监听数据，数据有更新的话会通知订阅者Watcher
• Compile指令解析，编译指令，更新视图
• Watcher订阅并收到每一个属性变化的通知，执行相关回调函数，更新视图

Vue的生命周期

• beforeCreate：实例初始化以后，在数据监听以及编译模板以前
• created：实例化完成，数据监听已绑定，DOM还未生成，$el不存在
• beforeMounted：编译模板，$el存在（render首次调用），但页面没有内容（还没有挂载）
• mounted：将编译好的HTML替换掉el指向的DOM，挂载完成，页面中有内容了
• beforeUpdate：监控到数据变化，组件更新以前；（数据更新了，可是虚拟DOM还没从新渲染）
• updated：组件更新以后；（虚拟DOM已经从新渲染&打补丁）
• beforeDestory：实例销毁以前
• destoryed：实例销毁完成
• activated：keep-alive组件激活时调用
• deactivated：keep-alive组件停用时调用

Vue中的Virtual DOM（虚拟DOM）

前面说到采用MVVM能够实现双向绑定，减小数据更新频繁时，DOM随之频繁操做的问题。但是当数据更新时，视图的渲染依然须要更新DOM树。DOM很是很是大，若是直接对DOM进行处理性能可能会受影响，因而聪明的FEer想到采用js对象模拟DOM树，也就是虚拟DOM。

固然若是每次视图更新都要渲染整棵DOM树工做量依然很大。因而乎，每次渲染以前对新旧两棵树进行对比diff()。差别更新到相应的位置。

对Vue组件的理解

组件，咱们能够为是一个自定义、可复用的代码段，都有其特定功能。Vue组件也是Vue实例，如header、footer。并且，组件间是能够通讯的。

单文件组件

单文件组件就是一个vue文件就是一个组件，一个文件能够导出一个组件。

组件中data必须是函数

data为函数，不一样地方使用这个组件时，可让这个数据私有。

// 若是data不是函数
let component1 = new MyComponent()
let component2 = new MyComponent()

component1.data.title = '123'
// 此时component2的data的title属性也会跟着变化
// 因此两个实例的data必须有本身的域
复制代码

组件间通讯

父子组件间通讯

• props传递数据，v-on,emit监听/触发自定义事件响应

爷孙组件件通讯

• 两次父子间组件通讯

兄弟组件通讯

• new Vue()做为EventBus，一个负责$emit触发事件，另外一个$on监听事件响应。

更复杂的状况：Vuex

Computed计算属性和Methods和监听属性Watch的区别

Computed实现原理：不管是属性仍是计算属性都会对应生成一个watcher实例。因此，当其依赖更新时，计算属性会随之更新。

• Computed 是有缓存的，若是依赖的数据未变化则不会更新
• Methods 每次调用才会进行计算
• Watch 监听属性变化，会有相应的处理

如何理解微信小程序

• 微信小程序采用了特殊的标记语言（WXML、WXSS）
• runtime不一样，浏览器这个runtime下是操做系统；小程序这个runtime下是微信
• 小程序最主要的目的仍是作入口，技术不是其价值所在