class Vue { constructor(options) {// 1. 通过属性保存选项的数据this.$options = optionsconst { el, data } = optionsthis.$data = data || {}// 如果是选择器， 则获取DOM元素this.$el = typeof el === 'string' ? document.querySelector(el) : el// 2. 把data中的成员转换成getter和setter，注入到vue实例中this._proxyData(data)// 3. 调用observer对象，监听数据的变化new Observer(data)// 4. 调用compiler对象，解析指令和差值表达式new Compiler(this)}/*** 代理数据, 把data里面的属性转换成getter, setter* @param {*} data */_proxyData(data) {// 遍历data中的所有属性Object.keys(data).forEach(key => { // 把data的属性注入到vue实例中Object.defineProperty(this, key, {enumerable: true, // 可枚举configurable: true, // 可配置,get() { return data[key]},set(newValue) { if (data[key] === newValue) returndata[key] = newValue}})})}
}

/*** 监视者*/
class Observer { constructor(data) {this.walk(data)}/*** 遍历对象的所有属性* @param {*} data */walk(data) { // 1. 判断data是否是对象if (!data || typeof data !== 'object') return// 2. 遍历data对象的所有属性Object.keys(data).forEach(key => { this.defineReactive(data, key, data[key])})}/*** 转换成响应式， 把属性转换成getter, setter* @param {*} obj 对象* @param {*} key 键* @param {*} val 值*/defineReactive(obj, key, val) { const that = this// 负责收集依赖，并发送通知const dep = new Dep()// 如果val是对象，把val内部的属性转换成响应式数据，递归调用this.walk(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() { // 收集依赖, target就是Watcher实例Dep.target && dep.addSub(Dep.target)return val // obj[key] 会触发递归， 所以上面方法需要传递一个val},set(newVal) { if (val === newVal) returnval = newVal// 如果赋值的值是一个新的对象的话that.walk(newVal)// 发送通知dep.notify()}})}
}

/*** 编译器*/
class Compiler {constructor (vm) {this.el = vm.$elthis.vm = vmthis.compile(this.el)}/*** 编译魔板， 处理文本节点和元素节点* @param {*} el 节点*/compile (el) {const childNodes = el.childNodes // 伪数组Array.from(childNodes).forEach(node => {if (this.isTextNode(node)) {// 处理文本节点this.compileText(node)} else if (this.isElementNode(node)) {// 处理元素节点this.comileElement(node)}// 判断node节点，是否有子节点，如果有子节点，要递归调用compileif (node.childNodes && node.childNodes.length) {this.compile(node)}})}/*** 编译元素节点， 处理指令* @param {*} node 元素节点*/comileElement(node) {const attributes = node.attributes // 伪数组// 遍历所有的属性节点Array.from(node.attributes).forEach(attr => {// 判断属性是否是指令let attrName = attr.nameif (this.isDirective(attrName)) {// v-text => textattrName = attrName.substr(2)let key = attr.value // 属性值this.update(node, key, attrName)}})}/*** 编译解析节点的指令， 并把指令解析出对应的值* @param {*} node 节点* @param {*} key  属性值对应的字段* @param {*} attrName 属性名称， 用于拼接后续的方法名*/update(node, key, attrName) {let updateFn = this[`${attrName}Updater`] // 方法名称updateFn && updateFn.call(this, node, this.vm[key], key) // 调用， call改变this指向}/*** 处理v-text指令* @param {*} node 节点* @param {*} value 文本内容* @param {*} key 创建Watcher所需*/textUpdater(node, value, key) { node.textContent = value // 初次渲染new Watcher(this.vm, key, (newValue) => { node.textContent = newValue})}/*** 处理v-model指令* @param {*} node * @param {*} value * @param {*} key  创建Watcher所需*/modelUpdater(node, value, key) { node.value = value // 初次渲染new Watcher(this.vm, key, (newVal) => { node.value = newVal})// 双向绑定node.addEventListener('input', () => {this.vm[key] = node.value})}/*** 编译文本节点， 处理插值表达式*  @param {*} node 元素节点*/compileText (node) {let reg = /{{(.+?)}}/ // 正则const content = node.textContent // 文本内容if (reg.test(content)) {let key = RegExp.$1.trim()node.textContent = content.replace(reg, this.vm[key]) // 初次渲染// 创建watcher对象，当数据改变更新视图, key对应的值发生改变时， 会调用回调函数new Watcher(this.vm, key, (newValue) => { node.textContent = newValue})} }/*** 判断元素属性是否是指令* @param {*} attrName 属性名称*/isDirective (attrName) {return attrName.startsWith('v-')}/*** 判断节点是否是文本节点* @param {*} node  节点*/isTextNode (node) {return node.nodeType === 3}/*** 判断节点是否是元素节点* @param {*} node 节点*/isElementNode (node) {return node.nodeType === 1}
}

/*** 发布者* 每一个监视的属性， 都具有一个对应的发布者对象*/
class Dep { constructor() { // 存储所有的观察者this.watchs = []}/*** 添加观察者（监视的属性对应的观察者）* 在监察的属性的getter 方法里添加观察者* @param {*} watch 观察者*/addSub(watch) { if (watch && watch.update) { // 观察者， 必须具有update方法this.watchs.push(watch)}}/*** 给所有的观察者， 发送通知*/notify() {this.watchs.forEach(watch => { watch.update()})}
}

/*** 观察者, 对应的是网页的节点中的的指令属性* 例如：v-text:xxx、 {{xxx}}*/
class Watcher { /*** @param {*} vm vue实例* @param {*} key 观察的具体属性* @param {*} cb 属性值发生变化后的对应的回调函数(更新DOM的方法)*/constructor(vm, key, cb) { this.vm = vm// data中的属性名称this.key = key// 回调函数负责更新视图this.cb = cb// 把watcher对象记录到Dep类的静态属性target, 在创建Watcher实例的时候Dep.target = this// 记录历史值, vm[key] 触发监察属性的getter方法,把观察者， 添加到发布者的数组中this.oldValue = vm[key]Dep.target = null // 清除， 防止重复添加}/*** 当数据发生变化的时候更新视图*/update() { let newValue = this.vm[this.key]if (this.oldValue === newValue) returnthis.cb(newValue) // 更新视图}
}

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue简化版</title>
</head>
<body><div id="app"><h1>差值表达式</h1><h3>{{ msg }}</h3><h3>{{ count }}</h3><h1>v-text</h1><div v-text="msg"></div><h1>v-model</h1><input type="text" v-model="msg"><input type="text" v-model="count"></div><script src="./js/dep.js"></script><script src="./js/watcher.js"></script><script src="./js/compiler.js"></script><script src="./js/observer.js"></script><script src="./js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: 'Hello Vue',count: 100,person: { name: 'zs' }}})console.log(vm.msg)// vm.msg = { test: 'Hello' }vm.test = 'abc'</script>
</body>
</html>