|
|
@ -4,52 +4,45 @@ import Watcher from '../observer/watcher' |
|
|
|
import { h, patch } from '../vdom/index' |
|
|
|
import { nextTick, isReserved, getOuterHTML } from '../util/index' |
|
|
|
|
|
|
|
export default class Component { |
|
|
|
constructor (options) { |
|
|
|
this.$options = options |
|
|
|
this._data = options.data |
|
|
|
const el = this._el = document.querySelector(options.el) |
|
|
|
const render = compile(getOuterHTML(el)) |
|
|
|
this._el.innerHTML = '' |
|
|
|
Object.keys(options.data).forEach(key => this._proxy(key)) |
|
|
|
if (options.methods) { |
|
|
|
Object.keys(options.methods).forEach(key => { |
|
|
|
this[key] = options.methods[key].bind(this) |
|
|
|
}) |
|
|
|
} |
|
|
|
this._ob = observe(options.data) |
|
|
|
this._watchers = [] |
|
|
|
this._watcher = new Watcher(this, render, this._update) |
|
|
|
this._update(this._watcher.value) |
|
|
|
export default function Component (options) { |
|
|
|
this.$options = options |
|
|
|
this._data = options.data |
|
|
|
const el = this._el = document.querySelector(options.el) |
|
|
|
const render = compile(getOuterHTML(el)) |
|
|
|
this._el.innerHTML = '' |
|
|
|
Object.keys(options.data).forEach(key => proxy(this, key)) |
|
|
|
if (options.methods) { |
|
|
|
Object.keys(options.methods).forEach(key => { |
|
|
|
this[key] = options.methods[key].bind(this) |
|
|
|
}) |
|
|
|
} |
|
|
|
this._ob = observe(options.data) |
|
|
|
this._watchers = [] |
|
|
|
this._watcher = new Watcher(this, render, this._update) |
|
|
|
this._update(this._watcher.value) |
|
|
|
} |
|
|
|
|
|
|
|
_update (vtree) { |
|
|
|
if (!this._tree) { |
|
|
|
patch(this._el, vtree) |
|
|
|
} else { |
|
|
|
patch(this._tree, vtree) |
|
|
|
} |
|
|
|
this._tree = vtree |
|
|
|
Component.prototype._update = function (vtree) { |
|
|
|
if (!this._tree) { |
|
|
|
patch(this._el, vtree) |
|
|
|
} else { |
|
|
|
patch(this._tree, vtree) |
|
|
|
} |
|
|
|
this._tree = vtree |
|
|
|
} |
|
|
|
|
|
|
|
_proxy (key) { |
|
|
|
if (!isReserved(key)) { |
|
|
|
// need to store ref to self here
|
|
|
|
// because these getter/setters might
|
|
|
|
// be called by child scopes via
|
|
|
|
// prototype inheritance.
|
|
|
|
var self = this |
|
|
|
Object.defineProperty(self, key, { |
|
|
|
configurable: true, |
|
|
|
enumerable: true, |
|
|
|
get: function proxyGetter () { |
|
|
|
return self._data[key] |
|
|
|
}, |
|
|
|
set: function proxySetter (val) { |
|
|
|
self._data[key] = val |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
function proxy (vm, key) { |
|
|
|
if (!isReserved(key)) { |
|
|
|
Object.defineProperty(vm, key, { |
|
|
|
configurable: true, |
|
|
|
enumerable: true, |
|
|
|
get: function proxyGetter () { |
|
|
|
return vm._data[key] |
|
|
|
}, |
|
|
|
set: function proxySetter (val) { |
|
|
|
vm._data[key] = val |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|