浅析Vue响应系统原理与搭建Vue2.x迷你版

Vue2.x响应式原理怎么实现的?

Vue 最独特的特性之一，是其非侵入性的响应式系统。那么什么是响应式原理?

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网络空间、营销软件、网站建设、城关网站维护、网站推广。

数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。简言之，在改变数据的时候，视图会跟着更新。

了解概念之后，那么它是怎么实现的呢?

其实是利用Object.defineProperty()中的getter 和setter方法和设计模式中的观察者模式。

那么，我们先来看下Object.defineProperty()。MDN中它是这样解释它的：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

 
 
 
 
  
  
  
  let data = {
  
  
  
   msg:'hello'
  
  
  
  };
  
  
  
  
  
  
  
  let vm = {};
  
  
  
  
  
  
  
  Object.defineProperty(vm, 'msg', {
  
  
  
          enumerable: true, // 可枚举（可遍历）
  
  
  
          configurable: true, // 可配置（可以使用delete 删除，可以通过defineProperty重新定义）
  
  
  
  
  
  
  
          // 当获取值的时候执行
  
  
  
          get() {
  
  
  
              console.log('get', data.msg);
  
  
  
              return data.msg
  
  
  
          },
  
  
  
          // 当设置值的时候执行
  
  
  
          set(newVal) {
  
  
  
              if (newVal === data.msg) {
  
  
  
                  return
  
  
  
              }
  
  
  
              data.msg = newVal;
  
  
  
              console.log('set', data.msg);
  
  
  
          }
  
  
  
  })
  
  
  
  
  
  
  
  // 测试
  
  
  
  
  
  
  
  console.log(vm.msg);
  
  
  
  /* 
  
  
  
  > "get" "hello"
  
  
  
  > "hello"
  
  
  
  */
  
  
  
  vm.msg = 'world'; // > "set" "world"

简单介绍Object.defineProperty()之后，接着就是了解观察者模式，看到它，你可能会想起发布-订阅模式。其实它们的本质是相同的，但是也存在一定的区别。

我们不妨先来看下发布-订阅模式。

发布-订阅者模式里面包含了三个模块，发布者，订阅者和统一调度中心。这里统一调度中心相当于报刊办事大厅。发布者相当与某个杂志负责人，他来中心这注册一个的杂志，而订阅者相当于用户，我在中心订阅了这分杂志。每当发布者发布了一期杂志，办事大厅就会通知订阅者来拿新杂志。发布-订阅者模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

下面，我们将通过一个实现Vue自定义事件的例子来更进一步了解发布-订阅模式。

 
 
 
 
  
  
  
  function EventEmitter(){
  
  
  
      // 初始化统一调度中心
  
  
  
      this.subs = Object.create(null); // {'click':[fn1,fn2]}
  
  
  
  }
  
  
  
  // 注册事件
  
  
  
  EventEmitter.prototype.$on = function (eventType,handler){
  
  
  
          console.log(this);
  
  
  
          this.subs[eventType]= this.subs[eventType]||[];
  
  
  
          this.subs[eventType].push(handler);
  
  
  
  }
  
  
  
  // 触发事件
  
  
  
  EventEmitter.prototype.$emit = function (eventType,data){
  
  
  
          if(this.subs[eventType]){
  
  
  
                  this.subs[eventType].forEach(handler => {
  
  
  
                      handler(data);
  
  
  
                  });
  
  
  
          }
  
  
  
  }
  
  
  
  
  
  
  
  // 测试
  
  
  
  const em = new EventEmitter();
  
  
  
  
  
  
  
  //订阅者
  
  
  
  em.$on('click1',(data)=>{
  
  
  
      console.log(data);
  
  
  
  })
  
  
  
  // 发布者
  
  
  
  em.$emit('click1','maomin') //maomin

这种自定义事件广泛应用于Vue同级组件传值。

接下来，我们来介绍观察者模式。

观察者模式是由目标调度，比如当事件触发时，目标就会调用观察者的方法，所以观察者模式的订阅者(观察者)与发布者(目标)之间存在依赖。

 
 
 
 
  
  
  
  // 发布者（目标）
  
  
  
  function Dep(){
  
  
  
      this.subs = [];
  
  
  
  }
  
  
  
  Dep.prototype.addSub = function (sub){
  
  
  
      if(sub&&sub.update){
  
  
  
              this.subs.push(sub);
  
  
  
      }
  
  
  
  }
  
  
  
  
  
  
  
  Dep.prototype.notify = function (data){
  
  
  
          this.subs.forEach(sub=>{
  
  
  
              sub.update(data);
  
  
  
          })
  
  
  
  }
  
  
  
  // 订阅者（观察者）
  
  
  
  function Watcher(){}
  
  
  
      Watcher.prototype.update=function(data){
  
  
  
      console.log(data);
  
  
  
  }
  
  
  
  
  
  
  
  // 测试
  
  
  
  let dep = new Dep();
  
  
  
  let watcher = new Watcher();
  
  
  
  // 收集依赖
  
  
  
  dep.addSub(watcher);
  
  
  
  // 发送通知
  
  
  
  dep.notify('1');
  
  
  
  dep.notify('2');

下图是区分两种模式。

实现Vue2.x迷你版本

为什么要实现一个Vue迷你版本，目的就是加深对Vue响应式原理以及其中一些API的理解。首先我们先来分析Vue2.x 响应式原理的整体结构。

如下图所示：

我们接下来，将根据这幅图片描述的流程来实现一款迷你版Vue。Vue2.x采用了Virtual DOM，但是因为这里只需要实现一个迷你版，所以我们这里做了简化，我们这里就是直接操作DOM。

下面，我们来看下我是如何搭建一款Vue mini的。

第一步

页面结构如下，我们可以先引入Vue2.x完整版本，看下实现效果。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
      
  
  
  
      
  
  
  
      Vue2.x Reactive
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
          文本节点
  
  
  
          {{msg}}
  
  
  
          {{count}}
  
  
  
          {{obj.name}}
  
  
  
          {{arr[0]}}
  
  
  
          {{obj.inner.age}}
  
  
  
          {{obj.inner.name}}
  
  
  
          v-text

v-model

v-html

// 实例。
function Vue(options) {
this.$options = options || {};
this._data = typeof options.data === 'function' ? options.data() : options.data || {};
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;
// 负责把data中的属性注入到Vue实例，转换成getter/setter
this._proxyData(this._data);
this.initMethods(this, options.methods || {})
// 负责调用observer监听data中所有属性的变化
new Observer(this._data);
// 负责调用compiler解析指令/插值表达式
new Compiler(this);
}
// 将data中的属性挂载到this上
Vue.prototype._proxyData = function (data) {
Object.keys(data).forEach(key => {
Object.defineProperty(this, key, {
configurable: true,
enumerable: true,
get() {
return data[key]
},
set(newVal) {
if (newVal === data[key]) {
return
}
data[key] = newVal;
}
})
})
}
function noop(a, b, c) { }
function polyfillBind(fn, ctx) {
function boundFn(a) {
var l = arguments.length;
return l
? l > 1
? fn.apply(ctx, arguments)
: fn.call(ctx, a)
: fn.call(ctx)
}
boundFn._length = fn.length;
return boundFn
}
function nativeBind(fn, ctx) {
return fn.bind(ctx)
}
const bind = Function.prototype.bind
? nativeBind
: polyfillBind;
// 初始化methods属性
Vue.prototype.initMethods = function (vm, methods) {
for (var key in methods) {
{
if (typeof methods[key] !== 'function') {
warn(
"Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " +
"Did you reference the function correctly?",
vm
);
}
}
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
}
}

// 数据劫持。
// 负责把data（_data）选项中的属性转换成响应式数据。
function Observer(data) {
this.walk(data);
}
Observer.prototype.walk = function (data) {
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key]);
})
}
Observer.prototype.defineReactive = function (obj, key, val) {
let that = this;
// 负责收集依赖
let dep = new Dep();
// 如果val是对象，把val内部的属性转换成响应式数据
this.walk(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
// 收集依赖
Dep.target && dep.addSub(Dep.target)
return val
},
set(newVal) {
if (newVal === val) {
return
}
val = newVal;
// data内属性重新赋值后，使其转化为响应式数据。
that.walk(newVal);
// 发送通知
dep.notify();
}
})
}

// 编译模板，解析指令/插值表达式
// 负责页面的首次渲染
// 当数据变化时重新渲染视图
function Compiler(vm) {
this.el = vm.$el;
this.vm = vm;
// 立即编译模板
this.compile(this.el);
}
// 编译模板，处理文本节点和元素节点
Compiler.prototype.compile = function (el) {
let childNodes = el.childNodes;
Array.from(childNodes).forEach(node => {
// 处理文本节点
if (this.isTextNode(node)) {
this.compileText(node);
}
// 处理元素节点
else if (this.isElementNode(node)) {
this.compileElement(node);
}
// 判断node节点，是否有子节点，如果有子节点，要递归调用compile方法
if (node.childNodes && node.childNodes.length) {
this.compile(node);
}
})
}
// 编译文本节点，处理插值表达式
Compiler.prototype.compileText = function (node) {
// console.dir(node);
let reg = /\{\{(.+?)\}\}/;
let value = node.textContent;
if (reg.test(value)) {
let key = RegExp.$1.trim();
if (this.vm.hasOwnProperty(key)) {
node.textContent = value.replace(reg, typeof this.vm[key] === 'object' ? JSON.stringify(this.vm[key]) : this.vm[key]);
// 创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newVal) => {
node.textContent = newVal;
})
} else {
const str = `this.vm.${key}`;
node.textContent = value.replace(reg, eval(str));
// 创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, () => {
const strw = `this.vm.${key}`;
node.textContent = value.replace(reg, eval(strw));
})
}
}
}
// 判断节点是否是文本节点
Compiler.prototype.isTextNode = function (node) {
return node.nodeType === 3;
}
// 判断节点是否是元素节点
Compiler.prototype.isElementNode = function (node) {
return node.nodeType === 1;
}
// 编译元素节点，处理指令
Compiler.prototype.compileElement = function (node) {
// console.log(node.attributes);
// 遍历所有的属性节点
Array.from(node.attributes).forEach(attr => {
let attrName = attr.name;
// console.log(attrName);
// 判断是否是指令
if (this.isDirective(attrName)) {
// 判断：如v-on:click
let eventName;
if (attrName.indexOf(':') !== -1) {
const strArr = attrName.substr(2).split(':');
attrName = strArr[0];
eventName = strArr[1];
} else if (attrName.indexOf('@') !== -1) {
eventName = attrName.substr(1);
attrName = 'on';
} else {
attrName = attrName.substr(2);
}
let key = attr.value;
this.update(node, key, attrName, eventName);
}
})
}
// 判断元素属性是否是指令
Compiler.prototype.isDirective = function (attrName) {
return attrName.startsWith('v-') || attrName.startsWith('@');
}
// 指令辅助函数
Compiler.prototype.update = function (node, key, attrName, eventName) {
let updateFn = this[attrName + 'Updater'];
updateFn && updateFn.call(this, node, this.vm[key], key, eventName);
}
// 处理v-text指令
Compiler.prototype.textUpdater = function (node, value, key) {
node.textContent = value;
new Watcher(this.vm, key, (newVal) => {
node.textContent = newVal;
})
}
// 处理v-html指令
Compiler.prototype.htmlUpdater = function (node, value, key) {
node.insertAdjacentHTML('beforeend', value);
new Watcher(this.vm, key, (newVal) => {
node.insertAdjacentHTML('beforeend', newVal);
})
}
// 处理v-show指令
Compiler.prototype.showUpdater = function (node, value, key) {
!value ? node.style.display = 'none' : node.style.display = 'block'
new Watcher(this.vm, key, (newVal) => {
!newVal ? node.style.display = 'none' : node.style.display = 'block';
})
}
// 处理v-if指令
Compiler.prototype.ifUpdater = function (node, value, key) {
const nodew = node;
const nodep = node.parentNode;
if (!value) {
node.parentNode.removeChild(node)
}
new Watcher(this.vm, key, (newVal) => {
console.log(newVal);
!newVal ? nodep.removeChild(node) : nodep.appendChild(nodew);
})
}
// 处理v-on指令
Compiler.prototype.onUpdater = function (node, value, key, eventName) {
if (eventName) {
const handler = this.vm.$options.methods[key].bind(this.vm);
node.addEventListener(eventName, handler);
}
}
// 处理v-model指令
Compiler.prototype.modelUpdater = function (node, value, key) {
node.value = value;
new Watcher(this.vm, key, (newVal) => {
node.value = newVal;
})
// 双向绑定，视图变化更新数据
node.addEventListener('input', () => {
this.vm[key] = node.value;
})
}

// 发布者。
// 收集依赖，添加所有的观察者（watcher）。通知所有的观察者。
function Dep() {
// 存储所有的观察者watcher
this.subs = [];
}
// 添加观察者
Dep.prototype.addSub = function (sub) {
if (sub && sub.update) {
this.subs.push(sub);
}
}
// 发送通知
Dep.prototype.notify = function () {
this.subs.forEach(sub => {
sub.update();
})
}

function Watcher(vm, key, cb) {
this.vm = vm;
this.key = key;
this.cb = cb;
// 把当前watcher对象记录到Dep类的静态属性target
Dep.target = this;
if (vm.hasOwnProperty(key)) {
this.oldVal = vm[key];
} else {
const str = `vm.${key}`;
this.oldVal = eval(str);
}
Dep.target = null;
}
// 当数据发生变化的时候更新视图
Watcher.prototype.update = function () {
let newVal;
if (this.vm.hasOwnProperty(this.key)) {
newVal = this.vm[this.key];
} else {
const str = `this.vm.${this.key}`;
newVal = eval(str);
}
this.cb(newVal);
}

vue2mini

浅析Vue响应系统原理与搭建Vue2.x迷你版

Vue2.x响应式原理怎么实现的?

实现Vue2.x迷你版本

第一步

文本节点

v-text

v-model

v-html

v-show

v-on

v-if

第二步

Vue

Observer

Compiler

Dep

Watcher

尤大开发的Vue2.x迷你版本