關於Vue的一些問題以及解答
1. 什麼是MVVM？
MVVM是Model-View-ViewModel的簡寫。它本質上就是 MVC 的改進版。
VM 是 View 與 Model 之間的橋樑，ViewModel可以實現數據和視圖的完全分離。在視圖模型中，綁定器在視圖和數據綁定器之間進行通信。
● M（model）：模型---javascript object,代表真實情況的內容（一個面向對象的方法）、或表示內容（以數據爲中心的方法）的數據訪問層
● V（view）：視圖---用戶界面（UI）
● Viewmodel：在vue中指vue實例對象，是一個公開公共屬性和命令的抽象的view；是一個轉值器，負責轉換Model中的數據對象，來讓對象變得更容易管理和使用。
2. Vue 的生命週期函數有哪些？
圖示來自官方：https://cn.vuejs.org/images/lifecycle.png
Vue的生命週期函數：
beforeCreate: 組件實例剛剛被創建，el 和 data 都未初始化。
created: 組件實例創建完成，屬性已經綁定，完成了 data 數據的初始化，也能獲得methods方法，但是 DOM 還未生成，所以 el 屬性還沒有。
beforeMount: 模版編譯/掛載之前，在內存中完成了 el 和 data 的初始化，完成虛擬模版的構建，但並未渲染。
mounted：模版編譯和掛載之後，虛擬DOM渲染到頁面上，之後可以操作DOM。
beforeUpdate：組件更新之前，data數據發生改變，頁面中的數據還是舊的，頁面未渲染。
updated：組件更新之後，頁面重新渲染。
beforeDestroy：組件銷燬調用，此時實例仍可調用，此時可以清楚計時器或事件等掃尾工作。
destroyed：組件銷燬後調用，解除綁定和事件監聽。
3. Vue響應式原理、雙向數據綁定的原理？
數據雙向綁定
所謂的雙向綁定，就是view的變化能反映到ViewModel上，ViewModel的變化能同步到view上。
數據驅動
Vue.js 一個核心思想是數據驅動。所謂數據驅動是指視圖是由數據驅動生成的，對視圖的修改，不會直接操作 DOM，而是通過修改數據。相比傳統的前端開發，如使用 jQuery 等前端庫直接修改 DOM，大大簡化了代碼量，特別是當交互複雜的時候，只關心數據的修改會讓代碼的邏輯變的非常清晰，因爲 DOM 變成了數據的映射，我們所有的邏輯都是對數據的修改，而不用碰觸 DOM，這樣的代碼非常利於維護
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應監聽回調。
Vue 的響應式，核心機制是 觀察者模式。
大致上是使用數據劫持和訂閱發佈實現雙向綁定。通過實例化一個Vue對象的時候，對其數據屬性遍歷，通過Object.defineProperty()給數據對象添加setter getter，並對模板做編譯生成指令對象，每個指令對象綁定一個watcher對象，然後對數據賦值的時候就會觸發setter，這時候相應的watcher對其再次求值，如果值確實發生變化了，就會通知相應的指令，調用指令的update方法，由於指令是對DOM的封裝，這時候會調用DOM的原生方法對DOM做更新，這就實現了數據驅動DOM的變化。同時vue還會對DOM做事件監聽，如果DOM發生變化，vue監聽到，就會修改相應的data。
簡單總結：
A、通過observe()函數裏面Object.defineProperty()監聽UI的變化，從而得到數據的變化；再通過compile()函數監聽綁定該數據的DOM節點，當數據變化的時候就會通知這些節點更新數據，從而實現UI的變化。
B、observe()函數實現監聽UI變化，從而獲得新的數據；compile()函數實現監聽數據變化，然後將數據傳送到綁定該數據的DOM節點上顯示。
vue3.0 使用 Proxy 代理器來實現對目標對象操作的攔截。
vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作爲它的data選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作爲數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。
4. Vue組件化的理解、組件間通信？
參考文章：https://www.cnblogs.com/amunamuna/p/8872979.html
Vue組件就是可複用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el這樣根實例特有的選項。
在 Vue 中，可以使用 props 向子組件傳遞數據。
父組件通過向在子組件的標籤上使用 v-bind 即 <子組件標籤名 :logo="logoMsg"></子組件標籤名>向子組件傳遞數據
子組件通過在實例中使用 props 屬性(一個數組)：['logo'] 來接收屬性值。
子組件主要通過事件傳遞數據給父組件。
子組件在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數。
在父組件中的子標籤中監聽該自定義事件並添加一個響應該事件的處理方法。
爲了便於開發，Vue 推出了一個狀態管理工具 Vuex，可以很方便實現組件之間的參數傳遞。
5. watch與computed屬性?
computed和watch屬性:https://blog.csdn.net/joseydon/article/details/81157867
computed屬性實現原理：https://blog.csdn.net/w18478272407/article/details/85079746
computed：對變量有複雜邏輯操作，能緩存數據，數據發生變化時才更新。
watch：監聽屬性變化，屬性發生變化才執行監聽的函數。