一、什么是響應式？

我們先來看一下響應式意味著什么？我們來看一段代碼：

• m有一個初始化的值，有一段代碼使用了這個值；

• 那么在m有一個新的值時，這段代碼可以自動重新執行；

let m = 20
console.log(m)
console.log(m * 2)m = 40

上面的這樣一種可以自動響應數據變量的代碼機制，我們就稱之為是響應式的。

那么我們再來看一下對象的響應式:

// 對象的響應式
const obj = {name: "wqx",age: 18
}// 修改obj對象
obj.name = "kobe"
obj.age = 20

二、響應式函數設計

首先，執行的代碼中可能不止一行代碼，所以我們可以將這些代碼放到一個函數中：

• 那么我們的問題就變成了，當數據發生變化時，自動去執行某一個函數；

但是有一個問題：在開發中我們是有很多的函數的，我們如何區分一個函數需要響應式，還是不需要響應式呢？

• 很明顯，下面的函數中 foo 需要在obj的name發生變化時，重新執行，做出響應；

• bar函數是一個完全獨立于obj的函數，它不需要執行任何響應式的操作；

const obj = {name: "wqx",age: 18
}function foo() {console.log(obj.name)console.log(obj.age)
}function bar() {console.log(obj.age + 100)
}

三、響應式函數的實現watchFn

但是我們怎么區分呢？

• 這個時候我們封裝一個新的函數watchFn；
• 凡是傳入到watchFn的函數，就是需要響應式的；
• 其他默認定義的函數都是不需要響應式的；

const obj = {name: "why",age: 18
}// function foo() {
//   console.log("foo:", obj.name)
//   console.log("foo", obj.age)
//   console.log("foo function")
// }// function bar() {
//   console.log("bar:", obj.name + " hello")
//   console.log("bar:", obj.age + 10)
//   console.log("bar function")
// }// 設置一個專門執行響應式函數的一個函數
const reactiveFns = []
function watchFn(fn) {reactiveFns.push(fn)fn()
}watchFn(function foo() {console.log("foo:", obj.name)console.log("foo", obj.age)console.log("foo function")
})watchFn(function bar() {console.log("bar:", obj.name + " hello")console.log("bar:", obj.age + 10)console.log("bar function")
})// 修改obj的屬性
console.log("name發生變化-----------------------")
obj.nam