Vue双向绑定原理代码实现

1、代码实现Vue双向绑定与事件绑定，v-bind v-model v-on

DOM结构准备

<body><div id="app"><form><input type="text" v-model="userInfo.name" /><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3><h4 v-bind="userInfo.name"></h4></div>
</body>

myVue创建实例，最终使用示例

window.onload = function () {var app = new myVue({el: '#app',data: {number: 0,userInfo: {name: 0}},methods: {increment: function () {console.log(this)console.log()this.userInfo.name += 1console.log(this.userInfo.name)this.number++}},directives: {}})console.log(app._binding, 'bind')}

创建myVue构造函数，

并初始化，将配置数据挂载到构造函数的原型对象上

  function myVue(options) {this._init(options)}myVue.prototype._init = function (options) {this.$options = options// 存储跟节点DOM对象this.$el = document.querySelector(options.el)// 存储data数据this.$data = options.data// 存储methods所有的方法this.$methods = options.methods// 用于存储data中数据绑定到dom的元素this._binding = {}// 形式如下// {//   number: {//     _directives: [watcher1, watcher2]//   },//   'userInfo.name': {//     _directives: [watcher1, watcher2]//   }// }// 绑定发布者，在set属性里面遍历_binding[key]._directivesthis._obverse(this.$data)// 递归根节点，通过识别节点的属性，识别出不同指令，不同指令进行不同操作，// 如v-bind指令：创建watcher并将其push进_binding// _binding[key]._directives.push(watcher)this._complie(this.$el)}

创建监听类watcher的构造函数，

并在其原型对象上实现update方法，该类将会把DOM中使用了指令的节点与data数据绑定

  function Watcher(name, el, vm, exp, attr) {this.name = name //指令名称，例如文本节点，该值设为"text"this.el = el //指令对应的DOM元素this.vm = vm //指令所属myVue实例this.exp = exp //指令对应的值，本例如"number"this.attr = attr //绑定的属性值，本例为"innerHTML"this.update()}Watcher.prototype.update = function () {// let exps = this.exp.split('.')// let res = this.vm.$data// exps.forEach(item => (res = res[item]))// console.log(res, 'res')this.el[this.attr] = getObjValueByStr(this.vm.$data, this.exp)}

在myVue原型上实现方法_obverse()，

在data数据的 set属性中实现页面数据更新的方法调用

  myVue.prototype._obverse = function (obj, preKey) {for (key in obj) {if (obj.hasOwnProperty(key)) {let curKeyif (preKey && preKey != '') {curKey = preKey + '.' + key} else {curKey = key}console.log(curKey)this._binding[curKey] = {_directives: []}let value = obj[key]console.log(value, '----')let binding = this._binding[curKey]Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function () {console.log(`获取${value}`)return value},set: function (newVal) {if (value !== newVal) {console.log(`更新${newVal}`)value = newValconsole.log(binding, 'binding')binding._directives.forEach(function (item) {item.update()})}}})if (typeof value === 'object') {this._obverse(value, curKey)}}}}

在myVue原型上实现方法_complie()，

遍历根节点中的所有节点，根据节点中设置的属性（即指令），对不同指令实现具体的功能如属性绑定指令 v-bind ，就创建一个监听实例，并放入myVue的binding中，binding[绑定的data中的数据名称]._directives.push(watcher实例)

 myVue.prototype._complie = function (root) {var _this = thisvar nodes = root.childrenfor (var i = 0; i < nodes.length; i++) {var node = nodes[i]if (node.children.length) {this._complie(node)}if (node.hasAttribute('v-click')) {node.onclick = (function () {var attrVal = nodes[i].getAttribute('v-click')return _this.$methods[attrVal].bind(_this.$data)})()}if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {node.addEventListener('input',(function (key) {var attrVal = node.getAttribute('v-model')_this._binding[attrVal]._directives.push(new Watcher('input',node,_this,attrVal,'value'))return function () {// let arr = attrVal.split('.')// let resAttr = _this.$data// for (let j = 0; j < arr.length - 1; j++) {//   resAttr = resAttr[arr[j]]// }// resAttr[arr[arr.length - 1]] = nodes[key].valueobjValueByStr(_this.$data, attrVal, nodes[key].value)// _this.$data[attrVal] = nodes[key].value}})(i))}if (node.hasAttribute('v-bind')) {var attrVal = node.getAttribute('v-bind')_this._binding[attrVal]._directives.push(new Watcher('text',node,_this,attrVal,'innerHTML'))}}}

2、实现原理说明

obj.hasOwnProperty(key)方法，判断对象中是否具有key属性
Object.defineProperty(对象，属性名，配置项)
Object.defineProperty中配置项说明，属性绑定：data数据修改，动态更新DOM中的数据，主要是通过set属性，在set中更新DOM中数据

属性名	功能说明
configurable：	表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
enumerable	表示能否通过for in循环访问属性，默认值为false
writable：	表示能否修改属性的值。默认值为false。
value：	包含这个属性的数据值。默认值为undefined。
get：	在读取属性时调用的函数，默认值是undefined
set：	在写入属性的时候调用的函数，默认值是undefined

_obverse()方法，在data所有数据中设置set，数据改变就把绑定的DOM节点值改变
_complie方法，遍历DOM节点树，并通过识别出节点中的指令，为其实现不同功能

3、完整代码

<!DOCTYPE html><head><title>myVue</title>
</head><style>#app {text-align: center;}
</style><body><div id="app"><form><input type="text" v-model="userInfo.name" /><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3><h4 v-bind="userInfo.name"></h4></div>
</body><script>function myVue(options) {this._init(options)}myVue.prototype._init = function (options) {this.$options = options// 存储跟节点DOM对象this.$el = document.querySelector(options.el)// 存储data数据this.$data = options.data// 存储methods所有的方法this.$methods = options.methods// 用于存储data中数据绑定到dom的元素this._binding = {}// 形式如下// {//   number: {//     _directives: [watcher1, watcher2]//   },//   'userInfo.name': {//     _directives: [watcher1, watcher2]//   }// }// 绑定发布者，在set属性里面遍历_binding[key]._directivesthis._obverse(this.$data)// 递归根节点，通过识别节点的属性，识别出不同指令，不同指令进行不同操作，// 如v-bind指令：创建watcher并将其push进_binding// _binding[key]._directives.push(watcher)this._complie(this.$el)}myVue.prototype._obverse = function (obj, preKey) {for (key in obj) {if (obj.hasOwnProperty(key)) {let curKeyif (preKey && preKey != '') {curKey = preKey + '.' + key} else {curKey = key}console.log(curKey)this._binding[curKey] = {_directives: []}let value = obj[key]console.log(value, '----')let binding = this._binding[curKey]Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function () {console.log(`获取${value}`)return value},set: function (newVal) {if (value !== newVal) {console.log(`更新${newVal}`)value = newValconsole.log(binding, 'binding')binding._directives.forEach(function (item) {item.update()})}}})if (typeof value === 'object') {this._obverse(value, curKey)}}}}myVue.prototype._complie = function (root) {var _this = thisvar nodes = root.childrenfor (var i = 0; i < nodes.length; i++) {var node = nodes[i]if (node.children.length) {this._complie(node)}if (node.hasAttribute('v-click')) {node.onclick = (function () {var attrVal = nodes[i].getAttribute('v-click')return _this.$methods[attrVal].bind(_this.$data)})()}if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {node.addEventListener('input',(function (key) {var attrVal = node.getAttribute('v-model')_this._binding[attrVal]._directives.push(new Watcher('input',node,_this,attrVal,'value'))return function () {// let arr = attrVal.split('.')// let resAttr = _this.$data// for (let j = 0; j < arr.length - 1; j++) {//   resAttr = resAttr[arr[j]]// }// resAttr[arr[arr.length - 1]] = nodes[key].valueobjValueByStr(_this.$data, attrVal, nodes[key].value)// _this.$data[attrVal] = nodes[key].value}})(i))}if (node.hasAttribute('v-bind')) {var attrVal = node.getAttribute('v-bind')_this._binding[attrVal]._directives.push(new Watcher('text',node,_this,attrVal,'innerHTML'))}}}function Watcher(name, el, vm, exp, attr) {this.name = name //指令名称，例如文本节点，该值设为"text"this.el = el //指令对应的DOM元素this.vm = vm //指令所属myVue实例this.exp = exp //指令对应的值，本例如"number"this.attr = attr //绑定的属性值，本例为"innerHTML"this.update()}Watcher.prototype.update = function () {// let exps = this.exp.split('.')// let res = this.vm.$data// exps.forEach(item => (res = res[item]))// console.log(res, 'res')this.el[this.attr] = getObjValueByStr(this.vm.$data, this.exp)}// 通过字符串形式（userInfo.name），将对象中的属性修改为目标值// target=userInfo: {name: '12'}, objStr = 'userInfo.name', value = '1'function objValueByStr(targetObj, objStr, value) {let arr = objStr.split('.')let resAttr = targetObjfor (let j = 0; j < arr.length - 1; j++) {resAttr = resAttr[arr[j]]}resAttr[arr[arr.length - 1]] = value}// 通过字符串形式（'userInfo.name'），获取对象中该属性的值function getObjValueByStr(targetObj, objStr) {let exps = objStr.split('.')let res = targetObjexps.forEach(item => (res = res[item]))return res}window.onload = function () {var app = new myVue({el: '#app',data: {number: 0,userInfo: {name: 0}},methods: {increment: function () {console.log(this)console.log()this.userInfo.name += 1console.log(this.userInfo.name)this.number++}},directives: {}})console.log(app._binding, 'bind')}
</script>

Vue双向绑定原理代码实现相关推荐

vue双向绑定原理及实现
vue双向绑定原理及实现一.MVC模式二.MVVM模式三.双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 四.最后写一个 ...
【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...
前端技巧|vue双向绑定原理，助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了.今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦. ...
浅谈vue双向绑定原理
简析mvvm框架目前angular,reat和vue都是mvvm类型的框架以vue为例这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view. 当前台显示的view发生 ...
浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定呢?vue又是怎么做的我们接下来就聊一聊什么是双向绑定? 当数据模型data变化时,页面视图会得到响应更新 vue又是怎么做的? vue其实现原理是对data的getter/sette ...
通俗易懂了解Vue双向绑定原理及实现
https://www.cnblogs.com/wangjiachen666/p/9883916.html 亲测可用
Vue基础知识总结 6：vue双向绑定原理
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...