1. v-model原理
雙向綁定原理
實現原理數據劫持+發布者+訂閱者
① 對vue中所有屬性使用Object.defineProperty()進行數據劫持，并為每個屬性分配發布者Dep數組，
② 然后在編譯的時候，給這個發布者數組添加訂閱者，v-model會加個訂閱者，v-bind也會，所有用到這個屬性的都會添加一個訂閱者;
③ 再給這個屬性添加監聽，當監聽到屬性發生變化的時候，就會使用Object.defineProperty()的set方法來修改屬性，然后將變化通知給發布者，發布者再循環去調用訂閱者的update方法更新到視圖上。
MVVM的進化史：MVC -> MVP -> MVVM
MVC：M（model模型）、V（view視圖）、C（controller控制器），M可以理解為后端傳過來的數據，V可以理解為前端頁面，C就是我們給dom元素添加的事件也就是邏輯代碼；它們三個間數據是單向的，也就是M發生變化了就立即通知V，V發生變化了就通知C然后給M，M和V的直接交互導致對dom的頻繁操作，降低了性能，所以出現了MVP；
MVP：M（model模型）、V（view視圖）、P（Presenter發布層），為了實現頁面和數據邏輯分離，所以出現了MVP，實現了M與P之間、V與P之間的數據雙向傳遞，即所有的交互都發生在P那，避免了M與V直接交互；為了實現雙向綁定所以出現了MVVM
MVVM：的出現既減少了對DOM的操作又實現了數據的雙向綁定；M（model模型）、V（view視圖）、VM（viewModel視圖模型，是C和P的合體），VM是MVVM的核心，它有2個方向：① 視圖更改模型，利用DOM事件監聽；② 模型更改視圖，利用數據綁定
2. diff算法
瀏覽器的運行機制：
構建dom樹 -> 構建渲染樹 -> 布局渲染樹 -> 繪制渲染樹
重排：渲染樹重新構建，比如修改dom尺寸、位置、新增、刪除dom都會使瀏覽器重新構建渲染樹；
重繪：部分dom僅外觀發生變化，比如顏色、字體大小等，瀏覽器會根據這個元素的新屬性重新繪制；
重排一定會引起重繪，但是重繪不一定會引起重排
如果每修改一個dom，就引起整顆樹的重繪和重排，非常影響性能，所以出現了diff算法。
diff算法是對2個虛擬dom樹進行同層級一一對比，如果有差異就以新的為準，然后插入到真是dom中，重新渲染。v-for中寫Key也是用的這個原理，為了能更快速的找到有差異的那個元素，不寫key的話就會進行頭尾兩端的相互比較。
3. v-for、v-if優先級
v-for比v-if優先級高，因此v-for和v-if一起使用的時候，數組的每一項都要執行v-if語句，所以建議把v-if寫在template或外層元素上。
4. vue-router hash、history區別
vue-router的出現是為了防止頁面改變的同時向后端發送請求。
hash模式：url后面會跟個#，而且這個#不會跟在請求的url后面，所以對后端沒有影響；
history模式：url后面沒有#，但是需要后端支持比如nginx需要配置try_files（將頁面重定向到首頁），不然會出現刷新二級頁面顯示404（因為刷新頁面時會訪問真實路由），hitory是利用html5新增的兩個方法history.pushState、history.replaceState這2個方法，只會使history對象發生變化，從而改變地址欄的url，不會向后端發送請求。
history和hash都是利用瀏覽器的特性來實現的。
路由守衛：
router.beforeEach有三個參數：to（去哪兒）、from（正要離開的路由）、next（是個函數，調用next就可以進入路由）。可以在里面做一些操作，比如驗證token是否存在、路由是否存在、是否有權限訪問這個頁面。
5. render、jsx區別
總結：
render使用createElement創建元素，有三個參數標簽名、屬性對象、子組件數組，寫起來繁瑣且不直觀；
jsx可以直接寫html標簽，babel會將jsx轉成render
6. 自定義指令鉤子函數
5個鉤子函數：
bind：只調用一次，指令第一次綁定到元素上的時候調用；
inserted：元素插入到父元素上的時候調用；
update：當前組件更新時調用，不管子組件是否更新；
componentUpdated：當前組件和子組件更新完成后調用；
unbind：解綁，只調用一次。
四個參數：
el（指令綁定的元素）、binding（一個對象，里面有很多值）、vnode（虛擬節點）、oldVnode（上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用）
除了 el 之外，其它參數都應該是只讀的，切勿進行修改。
如果想修改value，可以dom.dispatchEvent(new Event('input'));調用input事件使vue v-model綁定更新
