发表于： 2021-04-15 23:49:49
1 955
今天完成的事情：
开始任务7
学习使用vue的双向绑定
vue双向绑定原理:
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
<div id="demo"></div>
<input type="text" id="inp">
<script>
var obj = {};
var demo = document.querySelector('#demo')
var inp = document.querySelector('#inp')
Object.defineProperty(obj, 'name', {
get: function() {
return val;
},
set: function (newVal) {//当该属性被赋值的时候触发
inp.value = newVal;
demo.innerHTML = newVal;
}
})
inp.addEventListener('input', function(e) {
// 给obj的name属性赋值，进而触发该属性的set方法
obj.name = e.target.value;
});
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
vue代码实现
1. observer实现，主要是给每个vue的属性用Object.defineProperty()
let data = {name:'my name',age:12};
observe(data);
function observe(data) {
if(!data ||typeof data !=='object'){
return;
}
//取出所有属性
Object.keys(data).forEach(function (key){
defineReactive(data,key,data[key]);
})
}
function defineReactive(data,key,value){
observe(value);
Object.defineProperty(data,key,{
enumerable:true,
configurable:false,
get:function () {
return value;
},
set:function (newValue) {
console.log("data发生了变化,新的值为"+newValue);
value = newValue;
//通知watcher进行接下来的操作
}
})
}
2. watcher实现
function Watcher(vm, node, name, type) {
Dep.target = this;
this.name = name;
this.node = node;
this.vm = vm;
this.type = type;
this.update();
Dep.target = null;
}
Watcher.prototype = {
update: function() {
this.get();
this.node[this.type] = this.value; // 订阅者执行相应操作
},
// 获取data的属性值
get: function() {
console.log(1)
this.value = this.vm[this.name]; //触发相应属性的get
}
}
问题：
vue数据交互，表单验证还的继续看资料
返回列表
评论