vue中双向数据绑定(v-model)的原理
vue中实现双向数据绑定其实用的就是Object.defineProperty方法Object.defineProperty这个方法在js高程上面有详细的讲解通常我们如何给对象添加一个属性呢?let obj = {name: ""}obj.age = 18;obj["gender"] = "male";Object.defineProperty可以用来给对象添加属性,也...
·
vue中实现双向数据绑定其实用的就是Object.defineProperty方法
Object.defineProperty这个方法在js高程上面有详细的讲解
通常我们如何给对象添加一个属性呢?
let obj = {name: ""}
obj.age = 18;
obj["gender"] = "male";
Object.defineProperty可以用来给对象添加属性,也可以用来修改现有的属性
在添加属性的时候,可以设置属性以下的特性:
1. 是否为只读属性
2. 是否可以删除
3. 是否可以遍历
4. 可以为属性注册像改变事件一样的函数
写法:Object.defineProperty(要添加或者修改属性的对象, 要添加或者修改的属性名, 特征对象)
例如:
let obj = {};
Object.defineProperty(obj, "name", {
// 1. 默认的,该属性是只读的,不能被赋值 默认是false
writable: true,
// 2. 默认的,该属性不能被for in循环遍历 默认是false
enumerable: true,
// 3. 默认的,该属性不能被delete删除 默认是false
configurable: true,
// value属性用来设置属性的默认值
value: "123"
})
还可以这样写(vue中用的就是这种方法):
let nameValue = "";
let obj = {};
Object.defineProperty(obj, "name", {
// set和get不能和上面的writable,value同时出现
set(value){
// 这个函数就像是属性的改变事件,我们在给属性赋值的时候
// JS内部会自动调用这个函数
console.log("属性被赋值了");
// 在set函数中,需要接收用户所赋值的内容,也就是等号右边的内容 可以通过value形参接收
// 将其存储起来
nameValue = value;
},
get(){
// 这个函数就像是属性的被获取的事件,只要有人用到这个属性了,那这个函数就会被调用
console.log("属性被获取值了");
// 这个函数会在用户获取值得时候调用,用户获取到的值,就是当前函数的返回值
return nameValue;
}
})
注意:set和get不能和writable,value同时出现
vue中双向数据绑定的简单实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="ins" />
</div>
<script>
let obj = {};
let nameValue = "";
Object.defineProperty(obj, "name", {
set(value){
// ins.value = nameValue = value;
nameValue = value;
ins.value = value;
},
get(){
return nameValue;
}
})
// 双向绑定:其实描述的就是视图和数据的关系,视图的变化会同步更新数据,数据变化也会同步更新视图
// 1. 视图中用户输入数据的时候,我们需要获取到用户的输入,然后赋值给obj.name
// 1.1 注册事件
let ins = document.querySelector("#ins");
ins.oninput = function() {
// 1.2 获取用户的输入
// 1.3 赋值给obj.name
obj.name = this.value;
};
// 2. 数据在发生改变的时候,我们需要把数据赋值给input框
// 当用户通过=给obj.name赋值的时候,会触发上面的set方法
// 我们只需要在set方法中,把当前的更新的数据,赋值给input框即可
// obj.name = "123";
</script>
</body>
</html>
更多推荐
已为社区贡献4条内容
所有评论(0)