响应式学习----从VUE1 到 VUE2

老大让搞个分享，实在想不出有啥能分享的地方，积累不够啊，之前研究过vue 0.1 的源码（对你没看错就是0.1不是1.0），所以想再看看vue2就乱说一通吧。这是原版PPT

大概讲一下以下五方面内容
1. 三大框架
2. 订阅发布模式
3. VUE1双向数据绑定
4. VUE2 virtual DOM
5.其他

1. 三大框架

最近比较喜欢一张非常喜感的图。

其实最初的前端很简单，就跟这位大爷的说法差不多，直接拿起键盘，搞个编辑器然后打开浏览器就可以了，我相信包括我在内的很多人也就是这么单纯地喜欢上前端的，记得宇豪也是说喜欢前端就是因为CSS。

起初的前端，标准混乱，浏览器性能差，随着ajax和node出现带来的两次飞跃，前端能做的事情越来越多，越来越多的需求也放到了前端，由后端主导的静态页面发展到了前后端分离的动态页面，前端逻辑变得复杂，也难以管理。

我们需要更好的管理视图层逻辑，需要更好性能、可维护性、开发效率，不需要关注视图层，只需要处理业务逻辑、管理状态即可。

与此同时，程序员的最大优点懒癌发作，所以，10年angular开源，13年react开源，14年vue发布。

现如今可能比较流行的还是这三大框架，我们简单介绍一下

angular，接触不多，数据绑定采用脏检查，简单理解，angular检测到几种类型的变化(DOM等)，会对所有脏数据进行检查，其实性能也还不错，绝不像谣言中的定时检查一样那么差，包括谷歌也做了很多优化（团队实力毋庸置疑，开源贡献也很多，当然可能版本升级不兼容是最遭吐槽的地方了），也一直往更快、更小、更方便的方向优化，据说今年马上就出5了。angular也是早期web非常流行的框架，包括现在也还有不少使用它作为企业级解决方案，如网易等，不过现在的用户可能主要集中在angular1、2。

react和vue其实相似的地方很多
1. 都提供了响应式和组件化的视图组件
2. 都专注于核心库开发，其他功能作为插件
3. virtual DOM

不同之处：
1. jsx VS template
2. 数据绑定

react，按我理解的话，数据绑定是单向的
setState =》 传入新状态 =》 创建新virtual DOM =》 DOM diff =》 最小代价render
如果需要用户交互改变状态，那么需要手动绑定事件回调，再进行状态变动

vue双向数据邦迪是基于数据劫持 + 订阅发布模式，这也是本文的重点内容，后面会有比较详细的介绍。

每一个订阅发布都形成了一个链条，元编程实时追踪状态变化，并且根据依赖关系直接变更相应watcher，不用比较盲目脏检查
vue2 加入virtual DOM，同时开始支持ssr（服务端渲染）

2. 订阅发布模式

{
    const interFace = function (){
        const dependence = {}
        return {
            publish(type){            // 发布
                if(event[type]){
                    event[type].forEach(function(element) {
                        element()
                    })
                }
            },
            watch(type, callback){   // 订阅
                if(event[type]){
                    event[type].push(callback)
                } else {
                    event[type] = [callback]
                }
            }
        }
    }
    const {dispatch, addEvent} = interFace()
    watch("我会随时播报vue的数据变化", function(){
        console.log("vue的数据变化了，我们要同步DOM更新")
        })                                   // 订阅消息
    publish("我会随时播报vue的数据变化")         // 发布消息   
}

订阅发布模式，又称观察者模式，实质上是一种多对多关系的解耦，发布者会维护一个订阅列表（关系列表）记录订阅者的订阅行为，当有需要的时候，取出对应的订阅者并“通知”他们；订阅者会做出订阅行为，并等待发布者发布消息。

vue其实也是出于解耦“订阅者”和“发布者”两者关系考虑来使用者套模式，并且在发布者（劫持的变化）和订阅者（响应变化进行DOM变化）之间增加了dep对象来管理依赖，实现了更加明确的单一职责，使得代码组织变得更加清晰，可维护性更高，更方便进行后期优化和维护甚至重构。

下面我们结合前面的设计模式来实现一个最简单的vue

<div id="app" style="text-align:center;">
    <input id="input" type="text" v-model="name"><br> 姓名：
    <span id="text">{{name}}</span>
</div>

<script>
    const Vue = function (options) {
        let {node, data} = options,
            name = data.name,

        // 编译正则匹配取到 对象两个node节点
        input = document.querySelector("#input"),
        text = document.querySelector("#text")

        Object.defineProperty(data, "name", {
            enumerable: true,
            configurable: true,
            set(newVal) {
                input.value = newVal
                text.innerHTML = newVal
            },
            get(){
                return name
            }
        })

        input.addEventListener("input", function () {
            data.name = this.value
        })

        // 编译后 利用setter初始化模板中的值   实际上是使用getter初始化
        data.name = name
    }

    new Vue({
        el: "#app",
        data: {
            name: "allen"
        }
    })
</script>

在这个例子中基本干掉了编译的代码，实际的生命周期中是先进行数据劫持，再进行编译和依赖收集。

首先看一下Object.defineProperty(obj, key, descriptor)这个函数，它的descriptor有几种选项，其中包括get和set，定义了当前obj键值key的取和改两种行为，简单说，如果你进行obj.key 触发get方法，其返回值就是get return的值；进行obj.key = 1 赋值会触发set方法，并且第一参数为1。

所以所谓数据劫持就是劫持数据的变化，改变原本正常的行为，在原本的数据变化中加入你的代码，如果你的数据发生变动可以第一时间“被动监听到”。

set函数中监听到了数据变化，那么我们的预期就是会进行相应的DOM变动，这里简单就直接进行了innerHTML等赋值操作改变DOM。

get函数中主要是进行初始化的逻辑，是依赖收集的重要部分，demo中使用setter进行简单替代，注意构造函数最后一行。

当然这么简单的代码确实是可以运行的，也实现了双向数据绑定，但是强耦合赋予的是效率低下和可维护性差；并且随着需要绑定的数据数量和种类增加，甚至更进一步各种复杂指令类型对应的复杂操作，我们的代码会变得越来越臃肿和不可维护。

所以我们需要一种更规范的初始化流程和数据流动管理，抽象公共行为，加入中间对象解耦逻辑，形成职责单一、低耦合、高内聚的代码块。

3. VUE1双向数据绑定

我们来看一个简单的VUE场景

<div id="main">
  <h1>count: {{times}}</h1>
</div>
<script src="vue.js"></script>
<script>
  var vm = new Vue({
    el: '#main',
    data: function () {
      return {
        times: 1
      };
    },
    created: function () {
      var me = this;
      setInterval(function () {
        me.times++;
      }, 1000);
    }
  });
</script>

主要实现了一个定时器功能，js操作状态（times）不断变化，视图层随着状态变化而变化。

上图是简单的一个内部原理图，表示了times被赋值之后的变化，以及dep的依赖收集。

初始化，先进行数据劫持，然后模板编译，创建watcher也就是订阅者，紧接着dep进行依赖（发布订阅）关系确定，连接起observer和watcher，然后就等待数据变动。

初始化完毕后，times变化，数据劫持到变化，触发nodify（通知，即发布）行为，通知dep然后找到dep中，这个数据的相应依赖，然后updata watcher，watcher最终会进行相应DOM操作。

下面看一下我实现的简单vue的observer函数，其中有比较重要的数据劫持、初始化依赖收集、发布行为（nodify函数）

function Observer(options, keyword) {
    this.data = options

    Object.keys(options).forEach((key) => {
        if (typeof options[key] === 'object' && options[key] instanceof Object) {
            new Observer(options[key], key)
        } else {
            this.defineSetget(key, options[key])
        }
    })   
}

Observer.prototype.defineReactive = function (key, val) {
    const dep = new Dependence(key, val)    // 闭包一个dep实例

    Object.defineProperty(this.data, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            if (Dependence.target) { 
                dep.addDep()         // 添加watcher进 dep实例
            }
            return val              // 返回闭包数据
        },
        set: function (newVal) {
            if (val === newVal) return
            val = newVal            // 修改闭包数据
            console.log(`你改变了${key}`)
            if (typeof val === 'object' && val instanceof Object) {
                new Observer(val)
            }
            dep.notify(newVal)      // 通知，即发布数据变动
        }
    })
}

遍历对象，对对象的每个属性数据劫持

在每个defineProperty函数外层作用域创建一个闭包dep，dep和observer是根据作用域链利用闭包进行通信，setter在数据变动时通知watcher，初始化时我们会触发一次getter使其自动收集依赖，完成订阅，进入闭包dep实例的依赖列表中。

再看一下简单的watcher函数，其中有

function Watcher(type, path, DOM, tokens, vm) {
    this.type = type
    this.keyPath = path
    this.node = DOM
    this.tokens = tokens

    // Directive的功能
    if (type === "model") {
        DOM.addEventListener("input", e => this.set(vm, path, e.target.value))
    }

    Dependence.target = this

    // get到值 完成依赖收集 然后进行node初始化赋值
    this.tokens.forEach((elem) => {
        if (!elem.html) {
            this.update(this.get(vm, path)) 
        }
    })
}

// 触发相应发布者的getter
Watcher.prototype.get = function (vm, path) {}

// 触发相应发布者的getter
Watcher.prototype.set = function (vm, path, value) {}

// 通知Directive更新DOM
Watcher.prototype.update = function (value) {}

其中事件监听是简单概括了diective实例的功能，之后根据传入参数进行依赖收集，先确定当前计算的target也就是当前的watcher实例，触发相应observer的getter函数，获得当前初始化值并直接进行updata，进而更新视图。

4. VUE2 virtual DOM

vue2一个很大的改动就是加了virtual DOM，对数据绑定影响不太大，主要接管了DOM更新这边的事情。

当watcher被通知发生变动时，watcher会通知组件的render函数进行re-render操作，创建一个新的virtual DOM，再跟旧virtual DOM进行diff，得到一个最优的DOM更新路径（操作次数少，动作小）

实质上可以看做加了一个中间层对DOM渲染进行优化，只需要当做黑盒把状态注入，virtual DOM自动计算最小代价渲染。

看一段snabbdom的代码，snabbdom是一个非常轻量的virtual DOM库

var snabbdom = require("snabbdom");
var patch = snabbdom.init([ // 初始化补丁功能与选定的模块
  require("snabbdom/modules/class").default, // 使切换class变得容易
  require("snabbdom/modules/props").default, // 用于设置DOM元素的属性(注意区分props，attrs具体看snabbdom文档)
  require("snabbdom/modules/style").default, // 处理元素的style，支持动画
  require("snabbdom/modules/eventlisteners").default, // 事件监听器
]);
var h = require("snabbdom/h").default; // 用于创建vnode,VUE中render(createElement)的原形

var container = document.getElementById("container");

var vnode = h("div#container.two.classes", {on: {click: someFn}}, [
  h("span", {style: {fontWeight: "bold"}}, "This is bold"),
  " and this is just normal text",
  h("a", {props: {href: "/foo"}}, "I\"ll take you places!")
]);
// 第一次打补丁，用于渲染到页面，内部会建立关联关系，减少了创建oldvnode过程
patch(container, vnode);
//创建新节点
var newVnode = h("div#container.two.classes", {on: {click: anotherEventHandler}}, [
  h("span", {style: {fontWeight: "normal", fontStyle: "italic"}}, "This is now italic type"),
  " and this is still just normal text",
  h("a", {props: {href: "/bar"}}, "I\"ll take you places!")
]);
//第二次比较，上一次vnode比较，打补丁到页面
//VUE的patch在nextTick中，开启异步队列，删除了不必要的patch
patch(vnode, newVnode);
// Snabbdom efficiently updates the old view to the new state

注释已经比较详细了，就不详细讲了，再放一个virtual DOM的构造函数

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  functionalContext: Component | void; // only for functional component root nodes
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions
  ) {
    /*当前节点的标签名*/
    this.tag = tag
    /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
    this.data = data
    /*当前节点的子节点，是一个数组*/
    this.children = children
    /*当前节点的文本*/
    this.text = text
    /*当前虚拟节点对应的真实dom节点*/
    this.elm = elm
    /*当前节点的名字空间*/
    this.ns = undefined
    /*编译作用域*/
    this.context = context
    /*函数化组件作用域*/
    this.functionalContext = undefined
    /*节点的key属性，被当作节点的标志，用以优化*/
    this.key = data && data.key
    /*组件的option选项*/
    this.componentOptions = componentOptions
    /*当前节点对应的组件的实例*/
    this.componentInstance = undefined
    /*当前节点的父节点*/
    this.parent = undefined
    /*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
    this.raw = false
    /*静态节点标志*/
    this.isStatic = false
    /*是否作为跟节点插入*/
    this.isRootInsert = true
    /*是否为注释节点*/
    this.isComment = false
    /*是否为克隆节点*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}

再放一个简单的解析virtual DOM的函数

HTMLParser(html, {
  start: function( tag, attrs, unary ) { //标签开始
    results += "<" + tag;

    for ( var i = 0; i < attrs.length; i++ )
      results += " " + attrs[i].name + "="" + attrs[i].escaped + """;

    results += (unary ? "/" : "") + ">";
  },
  end: function( tag ) { //标签结束
    results += "</" + tag + ">";
  },
  chars: function( text ) { //文本
    results += text;
  },
  comment: function( text ) { //注释
    results += "<!--" + text + "-->";
  }
});

return results;

5. 其他

劫持

一个vue的视图系统主体是一个个的vm实例，组件vm层层嵌套，最终组成整个视图，而在vm上vue将vm中的数据proxy控制到vm上，可能说的有点抽象，实际效果就是

const vm = new Vue({
    data: {
        name: allen
    }
})

按照逻辑来看访问name属性应该是这样的

vm.data.name

但实际上你只需要这样

vm.name

这是因为构造函数内部有一段这样的逻辑

_proxy(options.data);/*构造函数中*/

/*代理*/
function _proxy (data) {
    const that = this;    // 指向vue实例

    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {
                return that._data[key];
            },
            set: function proxySetter (val) {
                that._data[key] = val;
            }
        })
    });
}

其实就是做了一个劫持，当访问vm.name属性时，返回vm.data.name

数组的特殊处理

JavaScript似乎从很多角度都能被看做一门奇怪的语言，从设计上说，“+”既可以为相加有可以为连接（包括动态类型，这类问题其实导致了一些JavaScript引擎解析上的性能问题）、易错的with语句，从实现来看，早期一直有很多bug……

而数组呢，其实也比较奇怪，在es6之前没有标准明确定义数组空位的问题，而length又是可读写的同时创建数组限制十分宽松，所以各大浏览器也是有很多不同的实现，es6之后对数组空位有了明确的规定。

在vue中，因为数组的宽松规定，在给我们带来一定便利的同时也带来很多问题：

vue不仅定义了新方法，也重写了vue的一些变异方法（会改变被这些方法调用的原始数组的方法）

// vue version-0.1
['push',
  'pop',
  'shift',
  'splice',
  'unshift',
  'sort',
  'reverse']
.forEach(function(method){
  // cache original method
  var original = Array.prototype[method]
  // define wrapped method
  _.define(arrayAugmentations, method, 
    function(){
      var args = slice.call(arguments)
      var result = original.apply(this, args)
      var ob = this.$observer
      var inserted, removed, index

      switch(method){
        case 'push':
          inserted = args
          index = this.length - args.length
          break
        case 'unshift':
          inserted = args
          index = 0
          break
        case 'pop':
          removed = [result]
          index = this.length
          break
        case 'shift':
          removed = [result]
          index = 0
          break
        case 'splice':
          inserted = args.slice(2)
          removed = result
          index = args[0]
          break
      }

      // link/unlink added/removed elements
      if (inserted) {
        ob.link(inserted, index)
      }
      if (removed) {
        ob.unlink(removed)
      }

      //updata indices
      if (method !== 'push' && method !== 'pop') {
        ob.updataIndecies()
      }

      // emit length change
      if (inserted || removed) {
        ob.notify('set', 'length', this.length)
      }

      // empty path, value is the Array itself
      ob.notify('mutate', '', this, {
        method: method,
        args: args,
        result: result,
        index: index,
        inserted: inserted || [],
        removed: removed || []
      })

      return result
    })
})

上面是vue 0.1的部分源码，主要是对数组的增、删、改、排序等方法进行重写，将其变为适应vue响应式变化的方法，如删除则通知相应watcher变动，增加则要重新关联依赖等。

运行时编译 or 模板编译

如果用过比较新版的vue-cli的读者可能遇到过如下场景

Runtime + Compiler: recommended for most users 

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   

这两者的区别还得从vue内部的编译过程说起，大概分为以下两步：
1. 将template编译为render函数（可选）
2. 创建vue实例，调用render函数

在vue-loader解析过程中，template会被解析成一个对象，也就是说你打包好的代码已经完成了这一步，template在你的代码中是以对象形式呈现的，这跟react有异曲同工之妙（猜测是因为他们都使用virtual DOM，都需要render函数），这个过程称为模板编译，所以如果你不用template，那么模板编译其实就基本没有用武之地了。

而运行时编译则是用来创建 Vue 实例，渲染并处理 virtual DOM 等行为的代码。基本上就是除去编译器的其他一切。同时也是比较建议使用运行时，因为运行时构建相比完整版缩减了 30% 的体积。

其实在vue1中整个编译过程是不作区分的，而在vue2中因为有了两个编译环境—客户端和服务端，而在进行ssr（server side render）时，因为是node环境，所以需要document.dagment等DOM接口支持的编译就不在适用了，所以做出了以上区分。

6. 总结

源码看得比较少，理解的也比较浅显，下一步还是要多多深入，尽可能从整体架构以及设计模式设计思想上来看vue，当然也要学习尤大的编码习惯、风格以及代码组织等。

另外再讲点其他的吧，随着敲代码越多，理解以及感想也就越来越多：

1. 其实很多比较吊的东西都是程序员懒癌发作的结果，可能每天写着重复的代码，做着重复的工作很崩溃，每次构建这么复杂，然后有了增量构建，每次打开网页这么慢，然后有了各种ssr优化手段。然后这些的方案啊，框架啊就诞生了。每六周换一个框架不是梦，真的是现实。

2. 底层实现也越来越吊，就像我们维护优化自己的网站等产品一样，Chrome等浏览器厂商也在维护优化自己的产品，其成果比较喜人包括js速度越来越快， 各种跨平台跨端，同时前端的权限也越来越大，比如现在的chorme 61 beta，支持 javascript模块（script标签 type=”module”），桌面支付请求API ，web share API （与app共享内容），webUSB（外设通信）等，另外除了浏览器还有各种工具、编译器（编译为js），总之前端应用场景越来越多，能做的事情越来越多。

3. 后端的逻辑越来越多的放到前端处理，甚至包括机器学习算法部分，可能主要还是考虑到分担服务端计算压力，提高即时用户体验，比如美登科技，他们也是试验了一套前后端机器学习的整体架构，前端会包括打点、个性化推荐、个性化配置学习等。

4. 未来展望。这么发展下去还真的很难说未来如何，不过我个人还是很相信前端的前途的，有一种比较著名的说法（记得是阮一峰老师说的）是，未来只有两种工程师，端工程师和云工程师

   就我理解而言，还是两大方向，数据化可视化（平台建设），数据挖掘（这里是自己理解比较广义的）

好了说一千道一万也没用，我们还是努力coding，多总结，多交流，也可以多参与开源。

番外：
上面提到了重写js原有方法，其实一般来说建议尽量避免这么做的~
当然我个人认为坑爹就要坑到底，所以如果真重置了标准方法，那么就多补一刀吧

重写方法后有一个不大不小的漏洞，比如Chrome的控制台再打印这个方法后就不会打印出[native code]字样了（以下注释为当前Chrome console实测结果）

Array.prototype.push = Array.prototype.pop    
//ƒ pop() { [native code] }

const a = [1,2,3]
a.push(4)
a    //(2) [1, 2]

Array.prototype.pop.toString = () => 'function push() { [native code] }'

Array.prototype.push   // ƒ push() { [native code] }