vue的双向绑定原理
https://www.jianshu.com/p/23180880d3aa
https://www.cnblogs.com/chenjg/p/9541291.html
https://www.jianshu.com/p/4dff7c2cdaaa
简单实现：
<body>
<input type="text" id="inp" />
<div id="box"></div>
<script>
let obj1={};
let inp=document.getElementById('inp');
let box=document.getElementById('box');
Object.defineProperty(obj1,'name',{
configurable: true,
enumerable: true,
get: function () {
console.log(111)
return val;
},
set:function (new1) {
box.innerHTML=new1;
}
});
inp.addEventListener('input',function(e){
obj1.name=e.target.value;
})
obj1.name=111;
</script>
</body>
复杂实现：
<body>
<div>name</div>
<script>
function observe(obj)
{
if(!obj||typeof obj !=='object')
{
return;
}
Object.keys(obj).forEach(function(key)
{
defineReactive(obj,key,obj[key]);
})
}
function defineReactive(obj,key,value)
{
// 递归子属性
observe(value);
let dp=new Dep();
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:function getter()
{
console.log('get value');
// 将 Watcher 添加到订阅
if(Dep.target)
{
dp.addSub(Dep.target);
}
return value;
},
set:function setter(newval)
{
console.log('set1 value');
value=newval;
console.log('set22 value');
// 执行 watcher 的 update 方法
dp.notify();
console.log('set33 value');
}
})
}
// 通过 Dep 解耦属性的依赖和更新操作
class Dep {
constructor() {
this.subs = []
}
// 添加依赖
addSub(sub) {
this.subs.push(sub)
}
// 更新
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
// 全局属性，通过该属性配置 Watcher
Dep.target = null
class Watcher{
constructor(obj,key,cb) {
// 将 Dep.target 指向自己
// 然后触发属性的 getter 添加监听
// 最后将 Dep.target 置空
Dep.target=this;
this.cb=cb;
this.obj=obj;
this.key=key;
this.value=obj[key];
Dep.target=null;
}
update()
{
// 获得新值
this.value = this.obj[this.key]
// 调用 update 方法更新 Dom
this.cb(this.value)
}
}
var data = { name: 'yck' }
observe(data)
function update(value) {
document.querySelector('div').innerText = value
}
// 模拟解析到 `{{name}}` 触发的操作
new Watcher(data, 'name', update)
// update Dom innerText
data.name = 'yyy'
</script>
</body>
vue的虚拟dom原理
1. 什么是vdom
①虚拟dom
②用js模拟dom结构
③dom变化的对比，放在js层来做（为什么不放在html，css，因为只有js能实现逻辑）
④提高重绘性能，减少dom操作，dom操作十分消耗性能，而js语言的执行与dom操作相比是很快的。
2. 需求场景
3. 解决的问题
①dom操作非常昂贵
②将dom对比操作放在js层（通过一个对比算法，知道哪些节点能动，哪些节点不能动），提高效率
4.vdom-snabbdom核心API
该方法需要从github中搜索引用相关js
①h()函数
②patch()函数
介绍一下diff算法(了解即可，不用太抠细节）
- 什么是diff算法
- 化繁为简（知道核心流程，不关心细节，花费20%精力就行）
- 为什么vdom要用diff算法
这个“找出”虚拟dom差异的过程，就需要diff算法
diff实现过程
