最近看了vue2.0源碼關(guān)于響應(yīng)式的實(shí)現(xiàn)，以下博文將通過簡(jiǎn)單的代碼還原vue2.0關(guān)于響應(yīng)式的實(shí)現(xiàn)思路。
站在用戶的角度思考問題，與客戶深入溝通，找到魚臺(tái)網(wǎng)站設(shè)計(jì)與魚臺(tái)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋魚臺(tái)地區(qū)。
注意，這里只是實(shí)現(xiàn)思路的還原，對(duì)于里面各種細(xì)節(jié)的實(shí)現(xiàn)，比如說數(shù)組里面數(shù)據(jù)的操作的監(jiān)聽，以及對(duì)象嵌套這些細(xì)節(jié)本實(shí)例都不會(huì)涉及到，如果想了解更加細(xì)節(jié)的實(shí)現(xiàn)，可以通過閱讀源碼 observer文件夾以及instance文件夾里面的state文件具體了解。
首先，我們先定義好實(shí)現(xiàn)vue對(duì)象的結(jié)構(gòu)
重慶分公司
重慶分公司
class Vue {
constructor(options) {
this.$options = options;
this._data = options.data;
this.$el = document.querySelector(options.el);
}
} 第一步：將data下面的屬性變?yōu)閛bservable
使用Object.defineProperty對(duì)數(shù)據(jù)對(duì)象做屬性get和set的監(jiān)聽，當(dāng)有數(shù)據(jù)讀取和賦值操作時(shí)則調(diào)用節(jié)點(diǎn)的指令，這樣使用最通用的=等號(hào)賦值就可以觸發(fā)了。
//數(shù)據(jù)劫持，監(jiān)控?cái)?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)
return
val = newVal
}
})
}
第二步：實(shí)現(xiàn)一個(gè)消息訂閱器
很簡(jiǎn)單，我們維護(hù)一個(gè)數(shù)組，這個(gè)數(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)用的時(shí)候，我們觸發(fā)notify，實(shí)現(xiàn)更新
那么問題來了。誰是訂閱者。對(duì)，是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)
return
val = newVal
dep.notify()
}
})
} 第三步：實(shí)現(xiàn)一個(gè) Watcher
Watcher的實(shí)現(xiàn)比較簡(jiǎn)單，其實(shí)就是執(zhí)行數(shù)據(jù)變化時(shí)我們要執(zhí)行的操作
class Watcher {
constructor(vm, cb) {
this.cb = cb
this.vm = vm
}
update(){
this.run()
}
run(){
this.cb.call(this.vm)
}
}第四步：touch拿到依賴
上述三步，我們實(shí)現(xiàn)了數(shù)據(jù)改變可以觸發(fā)更新，現(xiàn)在問題是我們無法將watcher與我們的數(shù)據(jù)聯(lián)系到一起。
我們知道data上的屬性設(shè)置defineReactive后，修改data 上的值會(huì)觸發(fā) set。那么我們?nèi)ata上值是會(huì)觸發(fā) get了。所以可以利用這一點(diǎn)，先執(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)
return
val = newVal
dep.notify()
}
})
}
最后我們來看用一個(gè)代理實(shí)現(xiàn)將我們對(duì)data的數(shù)據(jù)訪問綁定在vue對(duì)象上
_proxy(key) {
const self = this
Object.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))
下面就是整個(gè)實(shí)例的完整代碼
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 = this
Object.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 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)
return
val = newVal
dep.notify()
}
})
}
function watch(vm, exp, cb){
Dep.target = new Watcher(vm,cb);
return exp()
}
class Watcher {
constructor(vm, cb) {
this.cb = cb
this.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)
上面就是整個(gè)vue數(shù)據(jù)驅(qū)動(dòng)部分的整個(gè)思路。如果想深入了解更細(xì)節(jié)的實(shí)現(xiàn)，建議深入去看vue這部分的代碼。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
