现在我们从原生开始哈~
1.创建一个对象user,响应到html里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue双向绑定</title>
</head>
<body>
<div class="user_box">
<div>
<span> 姓名: </span>
<span class="name"> </span>
</div>
<div>
<span> 年龄: </span>
<span class="age"> </span>
</div>
</div>
</body>
</html>
2.创建user对象,并将其显示到页面上
let user = {
name: "xiaolin",
age: 30,
};
function showUserName() {
let el = document.querySelector(".name");
el.textContent = user.name;
}
function showUserAge() {
let el = document.querySelector(".age");
el.textContent = user.age;
}
showUserAge();
showUserName();
3.从上面引发的思考,优大神是怎么做的(vue2的数据响应 Object.defineProperties)
let intervalValue = user.name;
Object.defineProperty(user, "name", {
get() {
return intervalValue;
},
set(value) {
intervalValue = value;
showUserName();
},
});
4.这个时候回发现有 getter和setter,那么我是不是可以分装出来一个函数
function observe(obj) {
for (const key in obj) {
let intervalValue = obj[key];
Object.defineProperty(obj, key, {
get() {
return intervalValue;
},
set(value) {
intervalValue = value;
},
});
}
}
5.我在这里能读取出一个属性 那么我改怎么调用函数呢???
function observe(obj) {
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
let value = obj[key];
let funcs = [];
Object.defineProperty(obj, key, {
get() {
if (!funcs.includes(window._func) && window._func) {
funcs.push(window._func);
}
console.log(funcs);
return value;
},
set(newValue) {
value = newValue;
for (let i = 0; i < funcs.length; i++) {
let func = funcs[i];
console.log(func);
func();
}
},
});
}
}
}
function autoFunc(fn) {
window._func = fn;
fn();
window._func = null;
}
这一块的代码注意get里面的函数,我们是无法读取到函数的,所以采用了全局变量来做
let user = {
name: "xiaolin",
age: 30,
};
observe(user);
function showUserName() {
let el = document.querySelector(".name");
el.textContent = user.name;
}
function showUserAge() {
let el = document.querySelector(".age");
el.textContent = user.age;
}
autoFunc(showUserName);
autoFunc(showUserAge);
调取autoFunc()
总结:
在vue2采用的方式,我们主要针对的是vue的作者尤大佬的思想和一些技巧