Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數據綁定
更新時間：2020年09月02日 15:55:26 作者：vickylinj
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實現(xiàn)雙向數據綁定,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
雙向數據綁定無非就是，視圖 => 數據，數據 => 視圖的更新過程
以下的方案中的實現(xiàn)思路：
- 定義一個Vue的構造函數并初始化這個函數(myVue.prototype._init)
- 實現(xiàn)數據層的更新：數據劫持，定義一個 obverse 函數重寫data的set和get(myVue.prototype._obsever)
- 實現(xiàn)視圖層的更新：訂閱者模式，定義個 Watcher 函數實現(xiàn)對DOM的更新(Watcher)
- 將數據和視圖層進行綁定，解析指令v-bind、v-model、v-click(myVue.prototype._compile)
- 創(chuàng)建Vue實例(new myVue)
1.object.defineproperty方式實現(xiàn)雙向數據綁定
<!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改變時，我們會觸發(fā)其中的指令類更新，保證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改變時，觸發(fā)_binding[number] 中的綁定的Watcher類的更新
item.update() // 調 Watcher 實例的 update 方法更新 DOM
})
}
}
})
})
}
// 訂閱者模式： 綁定更新函數，實現(xiàn)對 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改變時，會觸發(fā)這個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屬性，我們監(jiān)聽它的onclick事件，觸發(fā)increment事件，即number++
let attrVal = node.getAttribute('v-click')
node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數的作用域保持一致
}
// 如果有v-model屬性，并且元素是INPUT或者TEXTAREA，我們監(jiān)聽它的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 節(jié)點
_this.$data,
attrVal, // v-model 綁定的值
'value'
))
node.addEventListener('input', () => {
_this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現(xiàn)了雙向綁定
})
}
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 = () => { // 當文檔內容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況
new myVue({
el: '#app',
data: {
number: 0,
count: 0
},
methods: {
increment() {
this.number++
},
incre() {
this.count++
}
}
})
}
</script>
</html>
2.Proxy 實現(xiàn)雙向數據綁定
<!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進行操作時，實際上執(zhí)行的是這段代碼里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屬性，我們監(jiān)聽它的onclick事件，觸發(fā)increment事件，即number++
let attrVal = node.getAttribute('v-click')
node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數的作用域保持一致
}
// 如果有v-model屬性，并且元素是INPUT或者TEXTAREA，我們監(jiān)聽它的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 節(jié)點
_this.$data,
attrVal, // v-model 綁定的值
'value',
))
node.addEventListener('input', () => {
_this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現(xiàn)了雙向綁定
})
}
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',
))
}
})
}
// 綁定更新函數，實現(xiàn)對 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改變時，會觸發(fā)這個update函數，保證對應的DOM內容進行了更新
Watcher.prototype.update = function () {
this.el[this.attr] = this.data[this.key]
}
window.onload = () => { // 當文檔內容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況
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進行操作時，實際上執(zhí)行的是這段代碼里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屬性，我們監(jiān)聽它的onclick事件，觸發(fā)increment事件，即number++
let attrVal = node.getAttribute('v-click')
node.onclick = _this.$methods[attrVal].bind(_this.$data) // bind是使data的作用域與method函數的作用域保持一致
}
// 如果有v-model屬性，并且元素是INPUT或者TEXTAREA，我們監(jiān)聽它的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 節(jié)點
_this.$data,
attrVal, // v-model 綁定的值
'value',
))
node.addEventListener('input', () => {
_this.$data[attrVal] = node.value // 使number 的值與 node的value保持一致，已經實現(xiàn)了雙向綁定
})
}
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 = () => { // 當文檔內容完全加載完成會觸發(fā)該事件,避免獲取不到對象的情況
new MyVue({
el: '#app',
data: {
number: 0,
count: 0
},
methods: {
increment() {
this.number++
},
incre() {
this.count++
}
}
})
}
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue動態(tài)組件表格的實現(xiàn)代碼,包括框架結構組件，文中還給大家封裝了幾個組件，有按鈕組件、圖片組件、滑動開關，結合示例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
今天我們用一種新的布局方式，使用路由視圖來實現(xiàn)布局樣式，本文將給大家介紹如何使用Vue?Router組合布局，文中有詳細的代碼示例供大家參考，感興趣的同學可以跟著小編一起學習2023-05-05
最近項目需要將原vue項目結合ts的使用進行改造，本文從安裝到vue組件編寫進行了說明，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
在前端的崗位上經常需要實現(xiàn)個生成個并下載的可視化圖表頁PDF文件,這篇文章主要給大家介紹了關于Vue前端如何實現(xiàn)生成PDF并下載功能的相關資料,需要的朋友可以參考下2021-10-10
Vue3+Vite+TS實現(xiàn)二次封裝element-plus業(yè)務組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎上實現(xiàn)二次封裝element-plus業(yè)務組件sfasga，下面文章也將圍繞實現(xiàn)二次封裝element-plus業(yè)務組件sfasga的相關介紹展開相關內容，具有一定的參考價值，需要的小伙伴可惡意參考一下2021-12-12
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue3中如何實現(xiàn)定義全局變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
國密SM4算法是一種對稱加密算法，適用于對稱密鑰加密和解密的場景，這篇文章主要介紹了vue使用國密SM4進行加密、解密,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue項目如何根據不同運行環(huán)境打包項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03