MVVM框架（vue）

2018-06-30 本文已影响59人阿昕_

对MVVM的认识

深入了解：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

jquery 和 vue 的区别

数据和视图分离，解耦（开放封闭原则）
以数据驱动视图，只关心数据变化，DOM操作被封装

MVC

视图（View）：用户界面
控制器（Controller）：业务逻辑
模型（Model）：数据保存

MVC
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

MVVM

视图（View）：用户界面
视图模型（ViewModel）：业务逻辑
模型（Model）：数据保存

MVVM
View 与 Model 不发生联系，都通过 ViewModel 传递
各部分之间的通信，都是双向的
采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel

Vue 三要素

响应式：Vue如何监听到data的每个属性变化

什么是响应式
修改data属性后，vue立刻监听到
data属性被代理到vm上
Object.defineProperty

    var vm = {}
    var data = {
      name: 'liuxin',
      age: 22
    }
    
    for (let key in data){
      Object.defineProperty(vm, key, {
        get: function() {
          return data[key]
        },
        set: function(newVal) {
          data[key] = newVal
        }
      })
    }

模板引擎：Vue的模板如何让被解析，指令如何处理

模板是什么
本质是字符串
有逻辑，如v-if v-for等
和html格式很像，但有很大区别
最终还是要转换成html展示
模板最终必须转换成js代码，有逻辑存在，要转换为html渲染页面，必须用js才能实现（图灵完备），因此模板最终要转换成一个js函数（render函数）
render函数
模板中所有的信息都包含在了render函数中
this 即 vm
name 即 this.name 即 vm.name，即data中的name
render函数与vdom
render函数返回vnode
updateComponent中实现了vdom的patch
页面首次渲染执行updateComponent
data中每次修改属性，执行updateComponent

渲染： Vue的模板如何被渲染成HTML以及渲染过程

Vue 的整个实现流程

解析模板成render函数

with的用法
模板中的所有信息被render函数包含
模板中用到的data中的属性，都变成了js变量
模板中的v-model v-for v-on 都变成了js逻辑
render函数返回vnode

响应式开始监听

Object.defineProperty
将data的属性代理到vm上

首次渲染，显示页面，且绑定依赖

初次渲染，执行updateComponent，执行vm._render()
执行render函数，会访问到vm.list和vm.title
会被响应式的get方法监听到
执行updateComponent，会走到vdom的patch方法
patch将vnode渲染成DOM，初次渲染完成

data属性变化，触发re-render

修改属性，被响应式的set监听到
set中执行updateComponent
updateComponent重新执行vm.render()
生成的vnode 和 preVnode，通过patch进行对比
渲染到html中

vue双向绑定原理

采用数据劫持结合观察者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

vue设计模式

观察者模式
1、松耦合的代码；
2、一对多的关系；
3、主体状态变化时，所有依赖被通知；
4、主体和观察者互不知晓。
基本上，满足上面四点的，就可以算是观察者模式了

//发布者
let pub = {
    notice(){
        dep.update();
    }
}
//订阅者
let sub1 = {
    update(){
        console.log('sub1 update')
    }
}
let sub2 = {
    update(){
        console.log('sub2 update')
    }
}
let sub3 = {
    update(){
        console.log('sub3 update')
    }
}
//主体
function Dep(_sub){
    this.update = ()=>{
        for(let i=0; i<_sub.length; i++){
            _sub[i].update();
        }
    }
}
let dep = new Dep([sub1,sub2,sub3]);

//发布消息
pub.notice();


//  > sub1 update
//  > sub2 update
//  > sub3 update

dep观察到pub发生了更新，就会循环依赖列表，依次触发各个依赖事件

vue生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

深入了解：https://www.cnblogs.com/sichaoyun/p/8406194.html