最近看了vue2.0源碼關(guān)于響應(yīng)式的實現(xiàn)，以下博文將通過簡單的代碼還原vue2.0關(guān)于響應(yīng)式的實現(xiàn)思路。

注意，這里只是實現(xiàn)思路的還原，對于里面各種細(xì)節(jié)的實現(xiàn)，比如說數(shù)組里面數(shù)據(jù)的操作的監(jiān)聽，以及對象嵌套這些細(xì)節(jié)本實例都不會涉及到，如果想了解更加細(xì)節(jié)的實現(xiàn)，可以通過閱讀源碼 observer文件夾以及instance文件夾里面的state文件具體了解。

首先，我們先定義好實現(xiàn)vue對象的結(jié)構(gòu)

class Vue {constructor(options) {this.$options = options;this._data = options.data;this.$el = document.querySelector(options.el);} }

第一步：將data下面的屬性變?yōu)?/span>observable

使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當(dāng)有數(shù)據(jù)讀取和賦值操作時則調(diào)用節(jié)點的指令，這樣使用最通用的=等號賦值就可以觸發(fā)了。

//數(shù)據(jù)劫持，監(jiān)控數(shù)據(jù)變化 function observer(value, cb){Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) }function defineReactive(obj, key, val, cb) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{return val},set: newVal => {if(newVal === val)returnval = newVal}}) }

第二步：實現(xiàn)一個消息訂閱器

很簡單，我們維護一個數(shù)組，這個數(shù)組，就放訂閱者，一旦觸發(fā)notify，訂閱者就調(diào)用自己

的update方法

class Dep {constructor() {this.subs = []}add(watcher) {this.subs.push(watcher)}notify() {this.subs.forEach((watcher) => watcher.cb())} }

每次set函數(shù)，調(diào)用的時候，我們觸發(fā)notify，實現(xiàn)更新

那么問題來了。誰是訂閱者。對，是Watcher。。一旦?dep.notify()就遍歷訂閱者，也就是Watcher，并調(diào)用他的update()方法

function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}}) }

第三步：實現(xiàn)一個 Watcher

Watcher的實現(xiàn)比較簡單，其實就是執(zhí)行數(shù)據(jù)變化時我們要執(zhí)行的操作

class Watcher {constructor(vm, cb) {this.cb = cbthis.vm = vm}update(){this.run()}run(){this.cb.call(this.vm)} }

第四步：touch拿到依賴

上述三步，我們實現(xiàn)了數(shù)據(jù)改變可以觸發(fā)更新，現(xiàn)在問題是我們無法將watcher與我們的數(shù)據(jù)聯(lián)系到一起。

我們知道data上的屬性設(shè)置defineReactive后，修改data 上的值會觸發(fā)?set。那么我們?nèi)?/span>data上值是會觸發(fā)?get了。所以可以利用這一點，先執(zhí)行以下render函數(shù)，就可以知道視圖的更新需要哪些數(shù)據(jù)的支持，并把它記錄為數(shù)據(jù)的訂閱者。

function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{if(Dep.target){dep.add(Dep.target)}return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}}) }

最后我們來看用一個代理實現(xiàn)將我們對data的數(shù)據(jù)訪問綁定在vue對象上

_proxy(key) {const self = thisObject.defineProperty(self, key, {configurable: true,enumerable: true,get: function proxyGetter () {return self._data[key]},set: function proxySetter (val) {self._data[key] = val}}) }Object.keys(options.data).forEach(key => this._proxy(key))

下面就是整個實例的完整代碼

class Vue {constructor(options) {this.$options = options;this._data = options.data;this.$el =document.querySelector(options.el);Object.keys(options.data).forEach(key => this._proxy(key))observer(options.data)watch(this, this._render.bind(this), this._update.bind(this))}_proxy(key) {const self = thisObject.defineProperty(self, key, {configurable: true,enumerable: true,get: function proxyGetter () {return self._data[key]},set: function proxySetter (val) {self._data[key] = val}})}_update() {console.log("我需要更新");this._render.call(this)}_render() {this._bindText();}_bindText() {let textDOMs=this.$el.querySelectorAll('[v-text]'),bindText;for(let i=0;i<textDOMs.length;i++){bindText=textDOMs[i].getAttribute('v-text');let data = this._data[bindText];if(data){textDOMs[i].innerHTML=data;} }} }function observer(value, cb){Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) }function defineReactive(obj, key, val, cb) {const dep = new Dep()Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{if(Dep.target){dep.add(Dep.target)}return val},set: newVal => {if(newVal === val)returnval = newValdep.notify()}}) } function watch(vm, exp, cb){Dep.target = new Watcher(vm,cb);return exp() }class Watcher {constructor(vm, cb) {this.cb = cbthis.vm = vm}update(){this.run()}run(){this.cb.call(this.vm)} }class Dep {constructor() {this.subs = []}add(watcher) {this.subs.push(watcher)}notify() {this.subs.forEach((watcher) => watcher.cb())} } Dep.target = null；

var demo = new Vue({
el: '#demo',
data: {
text: "hello world"
}
})

setTimeout(function(){
demo.text = "hello new world"

}, 1000)

<body><div id="demo"><div v-text="text"></div></div></body>

上面就是整個vue數(shù)據(jù)驅(qū)動部分的整個思路。如果想深入了解更細(xì)節(jié)的實現(xiàn)，建議深入去看vue這部分的代碼。

轉(zhuǎn)載于:https://www.cnblogs.com/caizhenbo/p/6710174.html

總結(jié)

以上是生活随笔為你收集整理的实现vue2.0响应式的基本思路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。