JavaScript模拟Vue.js有生命周期的效果
image.png
deepVue.js：
function Vue(options) {
this.$options = options;
if (typeof options.beforeCreate === 'function') {
options.beforeCreate.call(this);
}
this._data = typeof options.data === 'function' ? options.data() : options.data;
this._proxyData();
if (typeof options.created === 'function') {
options.created.call(this);
}
this.$mount(options.el);
}
Vue.prototype.el = document.querySelector(el);
if (typeof this.options.beforeMount.call(this);
}
this.render();
if (typeof this.options.mounted.call(this);
}
};
Vue.prototype._proxyData = function() {
var self = this;
Object.keys(this._data).forEach(function(key) {
Object.defineProperty(self, key, {
get: function() {
return self._data[key];
},
set: function(newValue) {
self._data[key] = newValue;
if (typeof self.options.beforeUpdate.call(self);
}
self.render();
if (typeof self.options.updated.call(self);
}
}
});
});
};
Vue.prototype.render = function() {
if (typeof this.el.innerHTML = this.$options.render.call(this);
}
};
var app = new Vue({
el: '#airmood',
data: {
message: 'Hello, airmood!'
},
beforeCreate: function() {
console.log('beforeCreate airmood');
},
created: function() {
console.log('created airmood');
},
beforeMount: function() {
console.log('beforeMount airmood');
},
mounted: function() {
console.log('mounted airmood');
},
beforeUpdate: function() {
console.log('beforeUpdate airmood');
},
updated: function() {
console.log('updated airmood');
},
render: function() {
return '<h2>' + this.message + '</h2>';
}
});
deepVue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>deepVue</title>
</head>
<body>
<div id="airmood"></div>
<script src="./deepVue.js"></script>
</body>
</html>
