前端进阶（浅析Vue——手写vue响应原理）
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接。【前端进阶（浅析Vue——手写vue响应原理）】先附上HTML代码
废话不说，开撸，一步一步跟着敲实现vue双向绑定
第一步：从函数开始
function Kve(options) {
this.$el = document.querySelector(options.el);
this.$data = https://www.it610.com/article/{};
this.$Attr = [];
this.loop(this.$el)this.observer(options.data)
}
- this.$el：获取所有的DOM元素
- loop和observer：至关重要的两个方法后续会讲到
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- 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响应原理实例就完成了，博主学艺不深，如有错误还望海涵。
千里之行始于足下，冰冻三尺非一日之寒，加油吧骚年！
推荐阅读
- 推荐系统论文进阶|CTR预估 论文精读(十一)--Deep Interest Evolution Network(DIEN)
- Jsr303做前端数据校验
- 普通人进阶的三个过程-很多人都知道，但却本末倒置
- 易效能进阶课程笔记29
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- C语言进阶栈帧示例详解教程
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- js保留自定义小数点