对象拦截&&双向绑定是如何实现的

最新推荐文章于 2024-01-30 09:56:37 发布

拉毛当智

最新推荐文章于 2024-01-30 09:56:37 发布

阅读量165

点赞数

分类专栏：原型链 vue 文章标签： vue.js es6

本文链接：https://blog.csdn.net/qq_41610533/article/details/107432261

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

原型链

2 篇文章 0 订阅

订阅专栏

1，对象的拦截

const obj = {
	userName:'周杰伦';
	age:'23';
}

let stuName = obj.userName;
let stuAge = obj.age;
let arr = [];
Object.defineProperty(obj,"userName,age"{
	set(v){   // v就是你要从外部修改的值
		stuName = v;
		stuAge = v;
	};
	get(){
		return stuName,stuAge;
	}
})
stuName = '林俊杰';
stuAge = '33';
console.log('姓名：'+stuName+'年龄：'+stuAge+);
//姓名：林俊杰  年龄：33

拦截器日志

const obj ={
	userName:"周星星",
	age : '22'
};
let userName = obj.userName;
let age = obj.age;
let arrLog =[];
Object.defineProperty(obj,"userName",{
	get(){
		return userName ;
	},
	set(v){
		arrLog.push(v);
		userName = v;
		console.log(v) // 啦啦啦
	}
})
obj.userName="啦啦啦";
console.log(obj.userName,arrLog);   //啦啦啦   ['啦啦啦']

3,依据拦截实现双向绑定原理

<body>
    <input type="text">
    <div></div>
</body>

双向绑定：数据，视图，当视图变化，数据变，数据变视图变。
通过defineProperty对数据进行拦截，会监听数据是否发生变化，一旦变化，会通知与数据相关的标签元素发生相对应的属性变化。（更新视图）

<script>
    const myText = document.querySelector("input");
    const myDiv = document.querySelector("div");
    // 双向绑定：数据，视图，当视图变化，数据变，数据变视图变
    const data = {
        str:"黑猫白猫，能抓住老鼠就是好猫"
    }
    let str = data.str;
    Object.defineProperty(data,"str",{
        set(v){
           str = myText.value = myDiv.innerHTML = v;
        },
        get(){
            return str;
        }
    })
    myDiv.innerHTML = myText.value = str;
    myText.oninput = function () {
        data.str = this.value;
    }
// 意念式编程。
</script>