JS双向数据绑定的原理介绍

`1.双向数据绑定的原理：属性拦截`

`2.属性拦截实现方式：使用Object.defineProperty()将对象的属性变成访问器属性。`

3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈：JS数据属性与访问器属性

4.本小节主要模拟vue的双向数据绑定原理，由于vue渲染数据使用了虚拟DOM技术，比较复杂，所以这里笔者就稍微了写简单一些哈。主要的目的是为了双向绑定的原理，而不是虚拟DOM渲染的原理。

<!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 id="app"><input type="text" placeholder="请输入文本" v-model="{{ msg }}"><br>您输入的文本是：<p>{{ msg }}</p>  <br><button onclick="app.msg = '我是黑马保健坤'">点我修改文本</button></div><script>function hmVue(obj) {//querySelector默认只会获取满足选择器条件的第一个元素// vue的挂载点el只能选中一个元素的原理this.el = document.querySelector(obj.el);// vue会将data对象中的成员平铺到vue实例中this.msg = obj.data.msg;this._msg = this.msg;/* 双向数据绑定的原理 ： 属性拦截*///1.监听data  -> 开始监听data中的数据变化Object.defineProperty(this, "msg", {get: function () {console.log('有人想要读取我的值');return this._msg;},set: function (newValue) {console.log('外部赋值时的传参' + newValue);this._msg = newValue;// data值变化 ： 修改input的value值input.value = newValue;// data值变化 ： 渲染到页面var p = document.querySelector('p');p.innerText = newValue;}});//2.监听input -> 开始监听input表单的value值变化//利用属性选择器，选中使用了 v-model指令的表单元素var input = document.querySelector(`${obj.el} [v-model]`);//监听输入框value值变化（这里我直接使用了oninput事件），其实使用属性拦截不仅可以让表单元素实现双向数据绑定，还可以让页面任何元素都能实现双向数据绑定input.oninput = function(){// input值变化 ， 修改data中的数据this.msg = input.value;}.bind(this);};var app = new hmVue({el: '#app',data: {msg: ''}});</script>
</body></html>

JS双向数据绑定的原理介绍相关推荐

vue双向数据绑定的原理
有关双向数据绑定的原理最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来.之后就在网上查找了别人写的博客,学习一下. 下面是博客园一篇博客,以 ...
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 代码演示:defineProp ...
原生js双向数据绑定
前面我们介绍过存储器属性(重新认识javascript对象(一)--对象及其属性),以及如何用Object.defineProperty()定义一个存储器属性,今天我们介绍如何用Object.defi ...
10行代码-原生JS双向数据绑定演示
很简单的10行代码就可以实现输入框与页面实时显示的绑定,也就是百度一下一大堆的所谓的双向数据绑定,完全没有必要搞那么长 function test() {const container = docum ...
学习vue的双向数据绑定的原理
1. vue数据双向绑定的原理. 2. 实现简单版vue的过程,主要实现{{}}.v-model和事件指令的功能. vue数据双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式 ...
深入理解vue.js双向绑定的实现原理
vue.js是MVVM(模型到视图和视图到模型)结构的,同类的还有AngularJs:至于MVC.MVP.MVVM的比较网上已经有很多了,这样不再重复.这篇文章将给大家深入的介绍vue.js双向绑定的 ...
“别具一格”的vue双向数据绑定原理
背景和一点点看法见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy.其实不然.这是vue中响应式的"基石". vue 中有 ...
双向数据绑定原理(三种实现方式)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>双向数 ...
【Vue】双向数据绑定原理 vue2.0 与 vue3.0
目录一.什么是双向数据绑定? 二.双向数据绑定原理 vue2.0 三.Vue 3.0使用ES6的新特性porxy 四.思考一.什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数 ...

JS双向数据绑定的原理介绍

`1.双向数据绑定的原理：属性拦截`

`2.属性拦截实现方式：使用Object.defineProperty()将对象的属性变成访问器属性。`

3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈：JS数据属性与访问器属性

4.本小节主要模拟vue的双向数据绑定原理，由于vue渲染数据使用了虚拟DOM技术，比较复杂，所以这里笔者就稍微了写简单一些哈。主要的目的是为了双向绑定的原理，而不是虚拟DOM渲染的原理。

JS双向数据绑定的原理介绍相关推荐

最新文章

热门文章

JS双向数据绑定的原理介绍

1.双向数据绑定的原理：属性拦截

2.属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。

3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈：JS数据属性与访问器属性

4.本小节主要模拟vue的双向数据绑定原理，由于vue渲染数据使用了虚拟DOM技术，比较复杂，所以这里笔者就稍微了写简单一些哈。主要的目的是为了双向绑定的原理，而不是虚拟DOM渲染的原理。

JS双向数据绑定的原理介绍相关推荐

最新文章

热门文章

`1.双向数据绑定的原理：属性拦截`

`2.属性拦截实现方式：使用Object.defineProperty()将对象的属性变成访问器属性。`