直接複製**到本地執行即可。
/*
自己寫的**, 實現vue的雙向繫結和依賴收集
場景: 多個子元件用到父元件data中的資料, 當父元件data中的此資料發生改變時,
所有依賴它的 子元件全部更新
通常子元件的從父元件中拿取的資料不允許發生改變
*///訂閱者 dep
//乙個訂閱者只管理乙個資料
class dep
addsubs (sub)
notify () )
}}//監聽者
//乙個vue例項包含乙個watcher例項
class watcher
update ()
}//對data中的資料設定讀寫監聽, 並且建立訂閱者, 用於收集子元件的依賴和發布
function definereactive (obj, key, value)
//return obj[key] 此寫法報錯 提示棧溢位 原因是無限呼叫get()
return value
},set (newval) }})
}//接收乙個物件作為引數, 將該物件的所有屬性呼叫definereactive設定讀寫監聽
function observer (obj)
object.keys(obj).foreach( key => )
}// 建構函式, 監聽 配置options中的data()方法返回的物件的所有屬性 的讀寫
class vue
// 例項化該元件的子元件
this._children = options.render ? (options.render() || {}) : {}
}}// 父元件資料
let data =
let times = 0
// 第一次呼叫返回的是第乙個子元件的從父元件繼承的資料(vue中props屬性的值)
// 第二次呼叫返回的是第二個子元件的從父元件繼承的資料(vue中props屬性的值)
function getprops ()
object.keys(obj).foreach( key => else
})return obj
} else if (times == 2)
object.keys(obj).foreach( key => else
})return obj
}}let vue_root = new vue(,
props: true,
render () {}
})let vue_2 = new vue(,
props: true,
render () {}
})return
}})console.log(vue_root)
// debugger
vue_root._data.first = 'hello hello' // vue_1 和 vue_2 都依賴此資料, 都更新
vue_root._data.third = "aaa" // 只有 vue_2 依賴到了此資料, 更新
Vue 雙向繫結的原理及實現Demo
vue用了一段時間了，一直沒有糾結過它的原理，今天看了一篇很不錯的文章 vue.js雙向繫結的實現原理，跟著敲了一遍，發現其中有意思的地方還是很多的，一些知識我之前都沒有接觸過，這裡要好好整理一下思路。這篇部落格涉及的東西比較多，還需要慢慢整理。目前還未寫完。主要的知識點 1.vue雙向繫結原理 一...
vue雙向繫結原理
大家知道vue的雙向繫結原理是利用object.defineproperty 這一方法，以下是我研究該方法的一些內容 語法 object.defineproperty obj,prop,descriptor descriptor是將被定義或修改的屬性描述符，而雙向繫結是利用get和set屬性描述符。...
Vue雙向繫結原理
vue實現資料雙向繫結的原理就是用object.defineproperty 重新定義 set方法 物件設定屬性值和 get方法 獲取屬性值的操縱來實現的 object.property 方法的解釋 object.property 引數1，引數2，引數3 返回值為該物件obj 其中引數1為該物件 o...