浅谈vue中数据双向绑定的实现原理
更新时间：2017年09月14日 10:30:52 作者：萝卜爱吃青菜
本篇文章主要介绍了浅谈vue中数据双向绑定的实现原理 ，主要使用v-model这个数据双向绑定，有兴趣的可以了解一下
vue中最常见的属v-model这个数据双向绑定了，很好奇它是如何实现的呢？尝试着用原生的JS去实现一下。
首先大致学习了解下Object.defineProperty()这个东东吧！
* Object.defineProperty()
* 对对象的属性进行 定义/修改
* */
let obj = {x:10}
// 这两种方式都相对来说比较简单，直接，但是有些时候我们需要对对象的属性的修改和增加进行必要的干预
// obj.y = 20;
// obj.x = 100;
// obj.x = 'abc';
//
// let arr = [1,2,3];
// arr.length = 'abc';//不可更改
// console.log(arr);
// console.log(obj.x);
// delete obj.x;
// console.log(obj);
Object.defineProperty(obj, 'y', {
configurable: false, //设置是否可删除 false为不可删除
value: 100
});
console.log(obj);
delete obj.y;//删除
console.log(obj);
//设置对象某个属性值的时候，顺便设置它的属性。enumerable 可枚举 configurable 可以删除否 writable 可改值否
Object.defineProperty(obj, 'z', {//enumerable 可枚举(没有则新添加)
enumerable: true,//为false时，for..in object.keys json.stringfy 不能取到该z属性
value: 10000
});
for (var attr in obj) {
console.log(attr);
}
Object.defineProperty(obj, 'm', {
writable: false,//可更改
value: 9
});
console.log(obj);
obj.m = 100;
console.log(obj);
以上总结了对象的defineProperty四个属性：configurable，enumerable，value，writable
接下来再深入认识下它的另外两个方法：set 以及get
注意：get和set不能与configurable，enumerable，value，writable同时存在
let obj = {x:10}
let y = 100;
Object.defineProperty(obj, 'y', {
get() {
//当obj的y属性被调用的时候触发，该方法的返回值将作为获取的结果
console.log('get');
return y;
},
set(value) {
//当obj的y属性被设置的时候触发
console.log('set', value);
y = value;
}
})
console.log(obj.y);
obj.y = 1;
console.log(obj.y);
介绍完defineProperty了，最后我们一起看看如何简单的实现数据双向绑定吧！
<body>
<input type="text" id="age">
<h1></h1>
<script>
var ageElement = document.querySelector('#age');
var h1Element = document.querySelector('h1');
let obj = {};
Object.defineProperty(obj, 'age', {
get() {
},
set(value) {
ageElement.value = value;
h1Element.innerHTML = value;
}
})
obj.age = 10;
ageElement.oninput = function() {
obj.age = this.value;
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
Vue项目报错:Uncaught SyntaxError: Unexpected token '＜&a
最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后就报了这个问题,这篇文章主要给大家介绍了关于Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue3头像上传组件功能,用到了自定义组件v-model的双向绑定，使用axios + formData 上传文件，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue Router history模式的配置方法及其原理,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue进入页面时滚动条始终在底部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
element ui循环调用this.$alert 消息提示只显示最后一个
这篇文章主要介绍了element ui循环调用this.$alert 消息提示只显示最后一个，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了Vue登录拦截 登录后继续跳转指定页面的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
工作中vue表单使用的最多的莫过于input、textarea、select等，原生js的基础上vue通过双向数据绑定等，实现了自己独有的一套指令，这是react中没有的部分，也算是vue的一大特色2022-09-09
最新评论