Vue2.x 與Vue3.x 雙向數據綁定區別

看過Vue2.x的源碼都知道，其雙向數據綁定原理是經過es5的Object.defineProperty，中的set方法來實現數據劫持的，可是有一個弊端就是沒法兼聽到數組內部的數據變化(固然咱們能夠經過arr = arr.concat([]))，來實現內部數據變化的檢測。相比Vue3有必定的性能問題。

Vue3.x是用ES6的語法 Proxy（Proxy 怎麼用你們可自行百度，網上教程大把，我就不在這贅述了）對象來實現的，這個玩意兒也能夠實現數據的劫持，相比Object.defineProperty的優點是：能夠檢測到數組內部數據的變化,以下圖：

![圖片上傳中...]

聽說proxy要比Object.defineProperty的內存減半,vue3.x還沒正式發佈，我也只是據說，據說哈，減不減半我不知道也不敢下結論。

你覺得這就完了嗎？哈哈哈哈，你沒猜錯，IE系列都不兼容Proxy，哈哈哈哈哈。

But

社會是要向前進的，這點相信尤大大已經爲咱們考慮到了，確定會有向下兼容的方案，那就是用原始的Object.defineProperty咯。

寫在最後：你們無論學什麼框架，必定要嘗試去讀下別人的源碼，不要一上來就vue-cli 就咔咔咔開擼。若是每一個前端都會vue-cli的話，那請問你的競爭力在哪？

最後但願個人分享可以幫助到你們。