Vue Object.defineProperty及ProxyVue实现双向数据绑定
戎兴言
本文向大家介绍Vue Object.defineProperty及ProxyVue实现双向数据绑定，包括了Vue Object.defineProperty及ProxyVue实现双向数据绑定的使用技巧和注意事项，需要的朋友参考一下
双向数据绑定无非就是，视图 => 数据，数据 => 视图的更新过程
以下的方案中的实现思路：
- 定义一个Vue的构造函数并初始化这个函数(myVue.prototype._init)
- 实现数据层的更新：数据劫持，定义一个 obverse 函数重写data的set和get(myVue.prototype._obsever)
- 实现视图层的更新：订阅者模式，定义个 Watcher 函数实现对DOM的更新(Watcher)
- 将数据和视图层进行绑定，解析指令v-bind、v-model、v-click(myVue.prototype._compile)
- 创建Vue实例(new myVue)
1.object.defineproperty方式实现双向数据绑定
<!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,methods
this.$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 = this
Object.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 = this
let 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>
2.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,methods
this.$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 = this
let 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 = this
let 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>
3.将上面代码改成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,methods
this.$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 = this
let 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 = this
let 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"
this.update()
}
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
本文向大家介绍Vue实现双向数据绑定，包括了Vue实现双向数据绑定的使用技巧和注意事项，需要的朋友参考一下 Vue实现双向数据绑定的方式，具体内容如下 Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。 实现对象属性变化
-
本文向大家介绍Nuxt.js 数据双向绑定的实现，包括了Nuxt.js 数据双向绑定的实现的使用技巧和注意事项，需要的朋友参考一下 假定我们有一个需求，一开始通过mounted()将一个字符串渲染在页面上，但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去，而不是跳转刷新页面来重新渲染 首先模板中data()中定义数据，并且要将定义的数据显示出来 然后我们通过methods里的
-
本文向大家介绍Vue数据双向绑定原理及简单实现方法，包括了Vue数据双向绑定原理及简单实现方法的使用技巧和注意事项，需要的朋友参考一下 Vue这个框架就不简单介绍了，它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一、示例 二、实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1）数据劫持、vue是通过Object.d
-
本文向大家介绍Angular JS数据的双向绑定详解及实例，包括了Angular JS数据的双向绑定详解及实例的使用技巧和注意事项，需要的朋友参考一下 Angular JS数据的双向绑定 接触AngularJS许了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。 初步大致有以下几个方面： 数据双向绑定 视图模型的继
-
本文向大家介绍JS原生数据双向绑定实现代码，包括了JS原生数据双向绑定实现代码的使用技巧和注意事项，需要的朋友参考一下 代码如下： 效果示例： 总结 以上所述是小编给大家介绍的JS原生数据双向绑定实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
1. 前言 本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单 我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 2. 慕课解释 用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选
-
本文向大家介绍实现非常简单的js双向数据绑定，包括了实现非常简单的js双向数据绑定的使用技巧和注意事项，需要的朋友参考一下 双向数据绑定指的就是，绑定对象属性的改变到用户界面的变化的能力，反之亦然。换种说法，如果我们有一个user对象和一个name属性，一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地，如果UI包含了一个输入用户姓名的输入框，输入一个新值就应该会使use
-
本文向大家介绍vue实现的双向数据绑定操作示例，包括了vue实现的双向数据绑定操作示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现的双向数据绑定操作。分享给大家供大家参考，具体如下： 使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可得到如下运行效果 感兴趣的朋友可以测试一下看看运行效果