Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接。
先附上HTML代码
<body id="app">
<input type="text" k-model="name"/>
<span k-bind="name"></span>
<br>
<input type="text" k-model="age"/>
<span k-bind="age"></span>
</body>
废话不说，开撸，一步一步跟着敲实现vue双向绑定
第一步：从函数开始
function Kve(options) {
this.$el = document.querySelector(options.el);
this.$data = {};
this.$Attr = [];
this.loop(this.$el)
this.observer(options.data)
}
- this.$el：获取所有的DOM元素
- loop和observer：至关重要的两个方法后续会讲到
第二步：注入灵魂——实例化Kve
window.onload = function() {
// 实例化Kve
var app = new Kve({
el: '#app',
data: {
name: 'moxuanya',
age: '25'
},
})
}
是不是很眼熟，眼熟就对了，结合第一步，初始化绑定数据
第三部：谁在盯着视图的改变——创建观察者团队
// 观察者类
function Watcher(name, el, exp, attr) {
this.name = name; // 指令名称
this.el = el; // 指令对应的DOM
this.exp = exp; // 指令对应的值，如"name"
this.attr = attr; // 绑定的属性值，如"textContent"
}
这一步是抽象的，也是核心思想，需要有人盯着视图，一旦视图改变刷新数据，一旦数据改变刷新视图，暂时不能理解没事，跟着下一步看看观察者们是怎么诞生的
第四步：观察者领证上岗
// 初始化循环DOM
Kve.prototype.loop = function(el) {
var nodes = el.children;
var _this = this;
for(var i=0; i<nodes.length-1; i++){
// 筛选含有指令的DOM节点
if (nodes[i].hasAttribute('k-model')) {
nodes[i].addEventListener('input', (function(key) {
var attrVal = nodes[i].getAttribute('k-model');
// 添加一个input的观察者
_this.$Attr.push(new Watcher('input',nodes[i],attrVal,'value'))
return function() {
// 监听input变化，触发Object.definePropert
_this.$key = attrVal;
_this.$data[attrVal] = nodes[key].value;
}
})(i)); // 自执行一一绑定input
}
if (nodes[i].hasAttribute('k-bind')) {
var attrVal = nodes[i].getAttribute('k-bind');
// 添加一个k-bind的观察者
_this.$Attr.push(new Watcher('span',nodes[i],attrVal,'textContent'))
}
}
}
- new Watcher()：新增一个dom元素的观察者，比如观察input的路人甲，观察span的路人乙
- _this.$Attr.push：把路人甲，路人乙等等丢进观察者路人团队
- Watcher 伟大的观察者们，这里的核心思想把视图跟数据绑定在一起
第五步：滴滴！数据改变，行动！
// 观察者的行为
Kve.prototype.observer = function(obj) {
var _this = this;
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
Object.defineProperty(this.$data, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('get：监听到了值获取')
},
set: function(val) {
console.log('set：监听到了值改变')
_this.update(key,val)
}
})
// 初始化data
_this.$data[key] = obj[key];
}
}
}
// 更新
Kve.prototype.update = function(key,val) {
for (const i of this.$Attr) {
if( i.exp === key){
i.el[i.attr] = val
}
}
}
Object.defineProperty() 可以监听到数据的改变，这里不做过多解释，一旦数据改变调用update方法，把观察者们叫过来，大家看一看这个值改变的key是哪个观察者手中的key，比如：路人甲把你的input值改了。就这样，一个简单的vue响应原理实例就完成了，博主学艺不深，如有错误还望海涵。
