Vue双向数据绑定：Object.defineProperty和Proxy

前言：我们从以前的操作DOM元素到现在的操作数据，从以前的MVC模式到现在的MVVM模式，以及现在深入人心的组件化开发，这个转折我觉得真的是太机智了。

现在我们平常开发主要用到的技术里，可以看到React和小程序是单向数据流，Vue和Angular是双向数据绑定，Angular用的是脏检测，Vue则是数据劫持和订阅者模式，今天我们来聊聊vue的双向数据绑定。

双向数据绑定无非就是，视图 => 数据，数据 => 视图的更新过程

借张图：

以下的方案中的实现思路：

定义一个Vue的构造函数并初始化这个函数
实现数据层的更新：数据劫持，定义一个 obverse 函数重写data的set和get
实现视图层的更新：订阅者模式，定义个 Watcher 函数实现对DOM的更新
将数据和视图层进行绑定，解析指令v-bind、v-model、v-click
创建Vue实例

好了下面我们要开始干正事了

这两天突然看到一个公众号文章，里面介绍了 Object.defineProperty 如何实现vue的双向数据绑定，虽然这类文章看过好多遍，但还是忍不住好奇心撮进去看了一眼（估计是因为养了猫的原因吧）

这一看不得了，还有这么简洁的实现方式

好像再涂涂改改一下我是不是能用 Proxy 来实现一遍？？？

好吧，说动手就动手，这一动手就是一整天，先修改了下它的代码能少多少少多少，顺便带上自己的注释，方便一会用 Proxy 方法来改造。

Object.defineProperty 实现方式的原文：面试题：你能写一个 Vue 的双向数据绑定吗？

下图就是我们实现双向数据后的页面，很简洁的三个元素

默认值：

修改了值后：

以下是我涂涂改改后用 Object.defineProperty 方式实现的代码，因为我的注释很详细，所以就不说怎么实现的了，如果你之前没有了解过这方面的知识，那么你可以先看看原文再过来看这段代码和注释

因为修改过和原文有些不同，但是思路大概一样

看完后你会发现 Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里，是通过递归以及遍历data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历

<!DOCTYPE html>
<html><head><title>myVue</title><style>#app{text-align: center;}
</style>
</head><body><div id="app"><form><input type="text" v-model="number" /><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3></div>
</body>
<script>// 定义一个myVue构造函数function myVue(option) {this._init(option)}myVue.prototype._init = function (options) { // 传了一个配置对象this.$options = options // options 为上面使用时传入的结构体，包括el,data,methodsthis.$el = document.querySelector(options.el) // el是 #app, this.$el是id为app的Element元素this.$data = options.data // this.$data = {number: 0}this.$methods = options.methods // this.$methods = {increment: function(){}}// _binding保存着model与view的映射关系，也就是我们前面定义的Watcher的实例。当model改变时，我们会触发其中的指令类更新，保证view也能实时更新this._binding = {}this._obsever(this.$data)this._compile(this.$el)}// 数据劫持：更新数据myVue.prototype._obsever = function (obj) {let _this = thisObject.keys(obj).forEach((key) => { // 遍历obj对象if (obj.hasOwnProperty(key)) { // 判断 obj 对象是否包含 key属性_this._binding[key] = [] // 按照前面的数据，_binding = {number: []} 存储 每一个 new Watcher}let value = obj[key]if (typeof value === 'object') { //如果值还是对象，则遍历处理_this._obsever(value)}Object.defineProperty(_this.$data, key, {enumerable: true,configurable: true,get: () => { // 获取 value 值return value},set: (newVal) => { // 更新 value 值if (value !== newVal) {value = newVal_this._binding[key].forEach((item) => { // 当number改变时，触发_binding[number] 中的绑定的Watcher类的更新item.update() // 调 Watcher 实例的 update 方法更新 DOM})}}})})}// 订阅者模式： 绑定更新函数，实现对 DOM 元素的更新function Watcher(el, data, key, attr) {this.el = el // 指令对应的DOM元素this.data = data // this.$data 数据: {number: 0, count: 0}this.key = key // 指令绑定的值，本例如"number"this.attr = attr // 绑定的属性值，本例为"innerHTML"，"value"this.update()}// 比如 H3.innerHTML = this.data.number; 当number改变时，会触发这个update函数，保证对应的DOM内容进行了更新Watcher.prototype.update = function () {this.el[this.attr] = this.data[this.key]}// 将view与model进行绑定，解析指令（v-bind,v-model,v-clickde）等myVue.prototype._compile = function (el) { // root 为id为app的Element元素，也就是我们的根元素let _this = thislet nodes = Array.prototype.slice.call(el.children) // 将为数组转化为真正的数组nodes.map(node => {if (node.children.length && node.children.length > 0) { // 对所有元素进行遍历，并进行处理_this._compile(node)}if (node.hasAttribute('v-click')) { // 如果有v-click属性，我们监听它的onclick事件，触发increment事件，即number++let attrVal = node.getAttribute('v-click')node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域与method函数的作用域保持一致}// 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {let attrVal = node.getAttribute('v-model')_this._binding[attrVal].push(new Watcher(node, // 对应的 DOM 节点_this.$data,attrVal, // v-model 绑定的值'value'))node.addEventListener('input', () => {_this.$data[attrVal] = node.value // 使number 的值与 node的value保持一致，已经实现了双向绑定})}if (node.hasAttribute('v-bind')) {let attrVal = node.getAttribute('v-bind')_this._binding[attrVal].push(new Watcher(node,_this.$data,attrVal, // v-bind 绑定的值'innerHTML'))}})}window.onload = () => { // 当文档内容完全加载完成会触发该事件,避免获取不到对象的情况new myVue({el: '#app',data: {number: 0,count: 0},methods: {increment() {this.number++},incre() {this.count++}}})}
</script></html>

好了，到了这个位置，默认你已经理解了上面的实现思路啦

下面我们要开始用 Proxy 实现啦，如果你对这个新朋友不太熟悉的话

可以看这个 http://es6.ruanyifeng.com/#docs/proxy 拿走不谢

Proxy 可以劫持整个对象，并返回一个新对象，这个对操作性还是性能都会有一个很大的提升

然后在网上看到一个通俗易懂的总结就是：

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

以下就是用 Proxy 实现双向数据绑定的方法，跟上面的实现效果是一模一样的，嗯～注释也很详细，此处不解释啦

<!DOCTYPE html>
<html><head><title>myVue</title><style>#app{text-align: center;}
</style>
</head><body><div id="app"><form><input type="text" v-model="number" /><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3></div>
</body>
<script>// 定义一个myVue构造函数function myVue(option) {this._init(option)}myVue.prototype._init = function (options) { // 传了一个配置对象this.$options = options // options 为上面使用时传入的结构体，包括el,data,methodsthis.$el = document.querySelector(options.el) // el是 #app, this.$el是id为app的Element元素this.$data = options.data // this.$data = {number: 0}this.$methods = options.methods // this.$methods = {increment: function(){}}this._binding = {}this._obsever(this.$data)this._complie(this.$el)}// 数据劫持：更新数据
myVue.prototype._obsever = function (data) {let _this = thislet handler = {get(target, key) {return target[key]; // 获取该对象上key的值},set(target, key, newValue) {let res = Reflect.set(target, key, newValue); // 将新值分配给属性的函数_this._binding[key].map(item => {item.update();});return res;}};// 把代理器返回的对象代理到this.$data，即this.$data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法this.$data = new Proxy(data, handler);}// 将view与model进行绑定，解析指令（v-bind,v-model,v-clickde）等myVue.prototype._complie = function (el) { // el 为id为app的Element元素，也就是我们的根元素let _this = thislet nodes = Array.prototype.slice.call(el.children) // 将为数组转化为真正的数组nodes.map(node => {if (node.children.length && node.children.length > 0) this._complie(node)if (node.hasAttribute('v-click')) { // 如果有v-click属性，我们监听它的onclick事件，触发increment事件，即number++let attrVal = node.getAttribute('v-click')node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域与method函数的作用域保持一致}// 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {let attrVal = node.getAttribute('v-model')console.log(_this._binding)if (!_this._binding[attrVal]) _this._binding[attrVal] = []_this._binding[attrVal].push(new Watcher(node, // 对应的 DOM 节点_this.$data,attrVal, // v-model 绑定的值'value',))node.addEventListener('input', () => {_this.$data[attrVal] = node.value // 使number 的值与 node的value保持一致，已经实现了双向绑定})}if (node.hasAttribute('v-bind')) {let attrVal = node.getAttribute('v-bind')if (!_this._binding[attrVal]) _this._binding[attrVal] = []_this._binding[attrVal].push(new Watcher(node,_this.$data,attrVal, // v-bind 绑定的值'innerHTML',))}})}// 绑定更新函数，实现对 DOM 元素的更新function Watcher(el, data, key, attr) {this.el = el // 指令对应的DOM元素this.data = data // 代理的对象 this.$data 数据: {number: 0, count: 0}this.key = key // 指令绑定的值，本例如"num"this.attr = attr // 绑定的属性值，本例为"innerHTML"，"value"this.update()}// 比如 H3.innerHTML = this.data.number; 当number改变时，会触发这个update函数，保证对应的DOM内容进行了更新Watcher.prototype.update = function () {this.el[this.attr] = this.data[this.key]}window.onload = () => { // 当文档内容完全加载完成会触发该事件,避免获取不到对象的情况new myVue({el: '#app',data: {number: 0,count: 0},methods: {increment() {this.number++},incre() {this.count++}}})}
</script></html>

但是做完之后呢，看着这写法有点繁琐，所以就用 class 类稍微改了下

<!DOCTYPE html>
<html><head><title>myVue</title><style>#app{text-align: center;}
</style>
</head><body><div id="app"><form><input type="text" v-model="number" /><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3></div>
</body>
<script>class MyVue {constructor(options) { // 接收了一个配置对象this.$options = options // options 为上面使用时传入的结构体，包括el,data,methodsthis.$el = document.querySelector(options.el) // el是 #app, this.$el是id为app的Element元素this.$data = options.data // this.$data = {number: 0}this.$methods = options.methods // this.$methods = {increment: function(){}}this._binding = {}this._obsever(this.$data)this._complie(this.$el)}_obsever (data) { // 数据劫持：更新数据let _this = thislet handler = {get(target, key) {return target[key]; // 获取该对象上key的值},set(target, key, newValue) {let res = Reflect.set(target, key, newValue); // 将新值分配给属性的函数_this._binding[key].map(item => {item.update();});return res;}};// 把代理器返回的对象代理到this.$data，即this.$data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法this.$data = new Proxy(data, handler);}_complie(el) { // el 为id为app的Element元素，也就是我们的根元素let _this = thislet nodes = Array.prototype.slice.call(el.children) // 将为数组转化为真正的数组nodes.map(node => {if (node.children.length && node.children.length > 0) this._complie(node)if (node.hasAttribute('v-click')) { // 如果有v-click属性，我们监听它的onclick事件，触发increment事件，即number++let attrVal = node.getAttribute('v-click')node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域与method函数的作用域保持一致}// 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件if (node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {let attrVal = node.getAttribute('v-model')if (!_this._binding[attrVal]) _this._binding[attrVal] = []_this._binding[attrVal].push(new Watcher(node, // 对应的 DOM 节点_this.$data,attrVal, // v-model 绑定的值'value',))node.addEventListener('input', () => {_this.$data[attrVal] = node.value // 使number 的值与 node的value保持一致，已经实现了双向绑定})}if (node.hasAttribute('v-bind')) {let attrVal = node.getAttribute('v-bind')if (!_this._binding[attrVal]) _this._binding[attrVal] = []_this._binding[attrVal].push(new Watcher(node,_this.$data,attrVal, // v-bind 绑定的值'innerHTML',))}})}}class Watcher {constructor (el, data, key, attr) {this.el = el // 指令对应的DOM元素this.data = data // 代理的对象 this.$data 数据: {number: 0, count: 0}this.key = key // 指令绑定的值，本例如"num"this.attr = attr // 绑定的属性值，本例为"innerHTML"，"value"}update () {this.el[this.attr] = this.data[this.key]}}window.onload = () => { // 当文档内容完全加载完成会触发该事件,避免获取不到对象的情况new MyVue({el: '#app',data: {number: 0,count: 0},methods: {increment() {this.number++},incre() {this.count++}}})}
</script></html>

结果，实现效果是这样的

默认值：

点击增加后：

默认值 0 没有渲染出来？？？其他操作均正常。

我仔细瞄了瞄代码，好像啥都没改？？？呃呃呃......

哎～摸摸小肚子，好饿哦…...算了就先这样吧，我先撤了……….

答案：Watcher里只定义里update方法，而没有调用，所以只要在Watcher的构造函数里调用一次this.update()就好了。也就是第一次渲染的时候没有更新，但是后面点击也好输入也好，都是手动触发的，所以不受影响。

历史文章：

手把手教你搭建一个结构清晰易开发易维护的公司的Vue项目，包含axios服务，vuex，公共组件/指令/过滤器/服务等
微信小程序名：你的专属简历（微信可直接搜索出来查看），教你前端如何一个人从零基础开发完整的小程序项目，包括后台可视化数据库
koa2+webpack4+React+pm2纯手工架子搭建，SSR项目入门教程以及流程指引详解：手把手教你实现服务端首屏渲染SSR项目
精简版：Vue双向数据绑定分别用 Object.defineProperty和Proxy的方法
Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？
用10行代码实现类似Element-ui里的tree树组件，以及一个有意思的小坑++i为什么与i+1不一样的详解

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Vue源码解读双向数据绑定小结
MVVM框架介绍 M (Model，数据模型层) V (View，视图层，数据展示，html页面) VM (ViewModel，视图模型，V与M连接的桥梁) MVVM框架实现了数据的双向绑定 - 当M层数据进行修改时，VM层会检测到变化&a…...
2024/4/21 2:46:04
记一次对vue双向绑定的理解
之前有看过一次vue双向绑定原理实现相关的博客，看得似懂非懂的，然后也就搁浅了。昨天脑海里又突然燃起了要不这块搞懂的冲动，于是乎又开始了一轮博客轰炸，综合研究了多位大神写得关于vue双向绑定的实现原理，然后结合…...
2024/5/6 8:33:47
Vue双向数据绑定原理
什么是数据双向绑定？ vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。数据双向绑定，一定…...
2024/4/21 2:46:02
Vue.js单向绑定和双向绑定实例
1、单向绑定单向数据绑定的实现思路： ① 所有数据只有一份 ② 一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data) ③ 若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。…...
2024/4/21 2:46:01
Vue单向数据绑定和双向数据绑定
单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法…...
2024/4/22 14:57:49
Vue与React和Angular比较
Vue与React和Angular区别 vue.js更轻量，压缩后大小只有20K, 但React压缩后大小为44k，Angular压缩后大小有56k，所以对于移动端来说，vue.js更适合；vue.js更易上手，学习曲线平稳，而Angular入门较难…...
2024/4/21 2:45:58
【前端vue——系列3】vue框架的优缺点；vue实现双向绑定
系列文章总结【前端vue——系列1】vue的路由【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理【前端vue——系列3】vue框架的优缺点；vue实现双向绑定【前端vue——系列4】vuex和angular 【前端vue——系列5】生命周期详讲（vue…...
2024/4/21 2:45:58
Vue双向数据绑定
几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没…...
2024/4/20 20:18:25
VUE与angular的异同之处
一，从安装vue与angular来说 1.创建一个vue项目比较繁琐，需要七八个步奏，还需要配置文件，一步小心就搞错了，很是麻烦。而angular就不了只需要两步就搞定了，在不考虑vue与angular的性能来说，我们会…...
2024/4/20 20:18:24
Vue与Angular的区别
Vue和Angular都是前端开发框架，它们之间还是有区别的，首先来看官方文档它们对的解释 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手…...
2024/4/25 4:48:25
Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引。这些改变不会触发change事件。Vue是因为实例化的时候已经把各个属性都setter和getter进去了。两个实现的机制不一样。故解决方案也不一样。详情查看：https://cn.…...
2024/4/20 20:18:21
Vue的优点，vue双向数据绑定的原理？
]7# Vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定&#…...
2024/5/3 0:13:46
理解vue双向数据绑定（MVVM模型）
什么是MVVM？ MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js…...
2024/4/21 2:45:56
Vue源码：双向绑定的实现原理
本篇博客供个人学习记录，暂时附上代码，后期进行整理。代码粘贴下来存储为html文件可直接查看效果。几种实现双向绑定的做法双向绑定可以简单的理解为：在单向绑定的基础上给可输入元素（input、textarea）添加oncha…...
2024/4/26 13:05:33
Vue 数据劫持双向绑定
实现数据绑定的做法有大致如下几种： 发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持（vue.js） 数据劫持双向绑定 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式&#xff…...
2024/4/27 0:39:34
10分钟从vue转到angular
angular-vue （施工中） 学习Vue过程中，记下与Angular相比较的笔记开发环境 VS Code Win-10 v1903 NodeJs: v10.14.1 npm: 6.4.1 angular/cli: 8.3.20 rxjs: 6.4.0安装 Angular: Angular的起源这里只简单的介绍一下，有兴趣的可…...
2024/4/21 2:45:53
Vue和angular的异同
Vue和angular两者大同小异,但在一些方面又很大的区别,下面给大家分享一下两者之间的异同 Vue 在API 与设计两方面上 Vue.js 都比 Angular 简单得多,大部分初学者都是以Vue为重点 vue.js官网：是一套构建用户界面的渐进式框架。与其他重量级框架不同的是&#xff0…...
2024/5/3 11:17:46
[vue] vue和angular有什么区别呢？
[vue] vue和angular有什么区别呢？ Vue.js - 多样化的 JavaScript 框架作为一个跨平台的，高度进步的框架，Vue 成为了许多需要创建单页应用程序的开发人员的首选。在用于开发 Web 应用程序的典型 MVC 体系结构中，Vue 充当了 View…...
2024/4/20 3:07:13
angular js点击tab中的li标签加载相应div区域
为什么80%的码农都做不了架构师？>>> <ul> <li ng-click"tab 1"> item 1</li> <li ng-click"tab 2"> item 2</li> <li ng-click"tab 3"> item 3</li> </ul> <div …...
2024/5/3 3:48:32
Angular+Bootstrap3导航菜单
AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定&am…...
2024/4/21 2:45:49

Vue双向数据绑定：Object.defineProperty和Proxy

相关文章

最新文章