Vue实现数据双向绑定原理：

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。

这里来简单模拟一下双向绑定。

特点

1.比如input被监视，当输入发送改变时，会将数据推送到模型中。

2.当模型中的数据发生改变时，会映射到视图上。

思路

1.用defineProperty 劫持对象，添加好getter/setter方法，对劫持对象进行赋值时会执行setter，取值时执行getter。

2.页面监视很容易想到事件监听，输入框用addEventListener 添加 input事件，输入发生改变时，触发事件回调，将值赋值给劫持的对象，触发劫持对象的setter，在setter中把新数据写到模型中、同时更新到页面上。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>输入：<input type='text' id='inputText'/><br>动态值：<span id="show"></span>
</body>
<script>var inputText = document.getElementById("inputText");var show = document.getElementById("show");//输入框添加 input事件inputText.addEventListener("input",function(e){//给劫持对象设置为输入后的值defineObj.value = e.target.value;})//劫持对象var defineObj = {};//defineProperty进行劫持Object.defineProperty(defineObj, 'value', {configurable: true,enumerable: true,get:function() {return val;},set: function(newVal){val = newVal;//设置输入值跟随变化inputText.value = val;//设置显示值跟随变化show.innerHTML = val;}})</script>
</html>

最终效果

在文本输入框输入值，会同步展示出来，内存中也同样发生了改变；

改变内存中的数据值，直接映射到页面上。

关注下方公众号，有更多资料、实例代码、面试技巧奉上！

用JS简单实现Vue的双向绑定相关推荐

vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
Vue的基础认知二---vue的双向绑定/vue获取DOM节点
在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一-构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容. 一.vue的双向绑定 mvvm框架: ...
Vue 数据双向绑定
1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model.v-model 的学习相对简单我们可以用 v-model 指令在表单 . 及元素上创建双向数据绑定.它会根据控件类型自动 ...
记录vue的双向绑定原理及实现
这里写自定义目录标题思路分析实现过程 1.实现一个Observer 2.实现Watcher 此文章是学习以为大神____chen的 <vue的双向绑定原理及实现> vue数据双向绑定是 ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
“约见”面试官系列之常见面试题第九篇vue实现双向绑定原理（建议收藏）
目录 1.原理 2.实现在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫m ...
vue radio双向绑定_Vue 双向绑定
Vue 双向绑定 MVC模式以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model– ...

用JS简单实现Vue的双向绑定

Vue实现数据双向绑定原理：

特点

思路

代码：

最终效果

关注下方公众号，有更多资料、实例代码、面试技巧奉上！

用JS简单实现Vue的双向绑定相关推荐

最新文章

热门文章