面試官最愛問的vue(上)

前言

每當開始一場技術面試的過程當中，面試官總會是有意去詢問想，會vue嗎？可見vue在國內的地位不容小覷，首當其問的就是能說說vue是如何實現數據雙向綁定嗎？

爲了不尷尬的場景再發生，咱們一塊兒好好研究下vue的響應式原理吧！

若是小夥伴早已熟知這兩個問題，能夠瀏覽下一朋友正在籌劃中的 面試彙總庫

閒事少管，走路陳展。開始正題。

1.Object.defineProperty()

引用vue官網的一段話。

當你把一個普通的 JavaScript 對象傳入 Vue 實例做爲 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。

Object.defineProperty在本次項目中扮演着相當重要的角色。

因此暫時不太熟悉這個方法的小夥伴能夠點擊 MDN

2.數據劫持

什麼是數據劫持？

經過Object.defineProperty來定義全部的屬性，這些屬性就能夠擁有get/set方法。

用vue官網的一個🌰。當我在控制檯輸入 app.$data我就能夠訪問到app實例中的data對象。

咱們能夠看到data對象下的屬性message，有屬於本身的get/set.

如何實現數據劫持？

如今咱們vue實例的data屬性都有了set()/get()。但咱們在vue中常常還會遇到 好比

this.$data.message = {repoter:{person:'zhx'}}
複製代碼

既然咱們要達到響應式，那麼就算後期改變咱們也要爲它加上get()/set()

咱們只須要在set方法中再一次調用Observe()便可，以下代碼所示

數據代理

在vue中咱們常常取值都是經過this.message取值而不是this.$data.message，因此這一步咱們要作$data的代理
複製代碼

本次主要分享了有

• 1.Object.defineProperty
• 2.數據劫持
• 3.數據代理

下一次主要分享 1.編譯模板處理 2.發佈訂閱模式

若是面試官再問起這題，我一定能成竹在胸。

但願本文可以對你有所幫助。祝你工做生活都愉快❤