defindeproperty与proxy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" v-model />
<p v-bind></p>
<script>
// // vue2
// var obj = {};
// //defineProperty有三个参数,不写全会报错
// Object.defineProperty(obj, 'name', {
// get() {
// console.log('取值了');
// // 必须返回 _属性名
// return _name;
// },
// set(value) {
// // 必须写 _属性名=value
// _name = value;
// console.log('赋值了:' + value);
// },
// });
// // obj.name = '123131';
// console.log(obj.name);
// vue3
// var data = { a: 2 };
// var dataProxy = new Proxy(data, {
// get(obj, prop) {
// return obj[prop];
// console.log('调用了', obj, prop);
// },
// set(obj, prop, value) {
// obj[prop] = value;
// console.log('赋值了', obj, prop, value);
// },
// });
// dataProxy.name = 'jack';
// dataProxy.age = '12';
// console.log(dataProxy.name, dataProxy);
// console.log(dataProxy.age);
// getter setter
// const obj = {
// get name() {
// console.log('取值');
// return _name;
// },
// set name(name) {
// console.log('赋值');
// _name = name;
// },
// };
// obj.name = 1234;
// console.log(obj.name);
// var txt = document.querySelector('[v-model]');
// txt.oninput = function () {
// console.log(123);
// dataProxy.prop = txt.value;
// };
// var data = {};
// var dataProxy = new Proxy(data, {
// get(obj, prop) {
// return obj[prop];
// console.log('调用了');
// },
// set(obj, prop, value) {
// obj[prop] = value;
// //console.log(obj==data);//true
// //console.log('赋值了')
// document.querySelector('[v-bind]').innerHTML = value;
// },
// });
// vue2 双向绑定
// var data = {};
// var txt = document.querySelector('[v-model]');
// txt.oninput = function () {
// data.name = txt.value;
// };
// Object.defineProperty(data, 'name', {
// get() {
// return _name;
// },
// set(value) {
// _name = value;
// document.querySelector('[v-bind]').innerHTML = value;
// },
// });
//vue3 双向绑定
var data = {};
var txt = document.querySelector('[v-model]');
txt.oninput = function () {
dataProxy.name = txt.value;
};
const dataProxy = new Proxy(data, {
get(obj, prop) {
return obj[prop];
},
set(obj, prop, value) {
obj[prop] = value;
document.querySelector('[v-bind]').innerHTML = value;
},
});
</script>
</body>
</html>
