proxy方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。可查看Vue 2.0双向绑定原理的实现

具体实现过程的代码如下：

定义构造函数

function Vue(option){this.$el = document.querySelector(option.el);   //获取挂载节点this.$data = option.data;this.$methods = option.methods;this.deps = {};     //所有订阅者集合 目标格式（一对多的关系）：{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}this.observer(this.$data);  //调用观察者this.compile(this.$el);     //调用指令解析器
}

定义指令解析器

Vue.prototype.compile = function (el) {let nodes = el.children; //获取挂载节点的子节点for (var i = 0; i < nodes.length; i++) {var node = nodes[i];if (node.children.length) {this.compile(node) //递归获取子节点}if (node.hasAttribute('l-model')) { //当子节点存在l-model指令let attrVal = node.getAttribute('l-model'); //获取属性值node.addEventListener('input', (() => {this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者let thisNode = node;return () => {this.$data[attrVal] = thisNode.value //更新数据层的数据}})())}if (node.hasAttribute('l-html')) {let attrVal = node.getAttribute('l-html'); //获取属性值this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者}if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {let attrVal = node.innerHTML.replace(/[{{|}}]/g, '');   //获取插值表达式内容this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者}if (node.hasAttribute('l-on:click')) {let attrVal = node.getAttribute('l-on:click'); //获取事件触发的方法名node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data}}
}

定义观察者(区别在这一块代码)

Vue.prototype.observer = function (data) {const that = this;for(var key in data){that.deps[key] = [];    //初始化所有订阅者对象{msg: [订阅者], info: []}}let handler = {get(target, property) {return target[property];},set(target, key, value) {let res = Reflect.set(target, key, value);var watchers = that.deps[key];watchers.map(item => {item.update();});return res;}}this.$data = new Proxy(data, handler);
}

定义订阅者

function Watcher(el, attr, vm, attrVal) {this.el = el;this.attr = attr;this.vm = vm;this.val = attrVal;this.update(); //更新视图
}

更新视图

Watcher.prototype.update = function () {this.el[this.attr] = this.vm.$data[this.val]
}

以上代码定义在一个Vue.js文件中，在需要使用双向绑定的地方引入即可。
尝试使用一下：

<!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><script src="./vue.js"></script>
</head>
<body><!--实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图4、mvvm入口函数，整合以上三者--><div id="app"><input type="text" l-model="msg" ><p l-html="msg"></p><input type="text" l-model="info" ><p l-html="info"></p><button l-on:click="clickMe">点我</button><p>{{msg}}</p></div><script>var vm = new Vue({el: "#app",data: {msg: "恭喜发财",info: "好好学习, 天天向上"},methods: {clickMe(){this.msg = "我爱敲代码";}}})</script>
</body>
</html>

Vue 3.0双向绑定原理的实现相关推荐

vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...
Vue数据绑定以及双向绑定原理分析
效果分析已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最 ...
angular 强制更新视图_angular,vue,react数据双向绑定原理分析
在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同. Angular数据绑定 Angular 采用"脏值检测"的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue 的双向绑定原理
目录一.一句话描述 vue 的双向绑定原理二.细说 vue 的双向绑定原理 1.vue 2.x 的双向绑定 2.vue 3.x 的双向绑定 3.一个完整的案例一.一句话描述 vue 的双向绑定原 ...
【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
基于Vue2.0数据双向绑定原理-详解
在线使用-线上测试-源码 //代码: <div id="app"><input v-model="name" type="text& ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...

Vue 3.0双向绑定原理的实现

proxy方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue 3.0双向绑定原理的实现相关推荐

最新文章

热门文章