1. Vue 響應式原理
Vue 有兩大核心：(1)數據驅動頁面 (2)組件化
數據驅動頁面 MVVM 的響應式原理如下：
v-model 原理是把輸入值給 input (綁定 oninput 事件)，立刻調用底層對象對應的 setter 方法，改變 data 裡屬性的值，從而實現雙向數據綁定。
🔍 可參考這篇：從原始碼看 Vue 響應式原理
2. ref 屬性
- 被用來給元素或子組件註冊引用信息（id的替代者）
- 應用在 html 標籤上獲取的是真實 DOM 元素，應用在組件標籤上是組件實例對象
- 使用方式：
- 打標識：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 取：
this.$refs.xxx
🔍 可參考這篇：【Vue2基礎】ref的用法
3. props 配置項
props 功能：讓組件接收外部傳過來的數據
傳遞數據：
<Demo name="xxx">
接收數據：
第1種 方式（只接收）： props:['name']
第2種 方式（限制類型）：props:{name:String}
第3種 方式（限制類型、限制必要性、指定默認值）：
props:{
name:{
type:String, //類型
required:true, //必要性
default:'Jacy' //默認值
}
}備註：props 是唯讀的，Vue 底層會監測開發者對 props 的修改，如果進行修改，即發出警告。若欲強制修改，需要複製 props 內容到 data 中，再修改 data 中的數據。
使用 v-model 時要切記：v-model 綁定的值不能是 props 傳過來的值，因為 props 是不可以修改的！
4. 混入 Mixin
功能：可以把多個組件共用的配置提取成一個混入對象
使用方式：
第一步定義混合：
{
data(){...},
methods: {...},
...
}第二步使用混入：
全局混入： Vue.mixin(xxx)
局部混入： mixins:['xxx']
5. this.$nextTick 回調函數
created() 階段無法操作 DOM，原因是在 created 執行的時候 DOM 並未進行任何渲染。如想操作 DOM，需用 $nextTick()。
mounted 不保證此時所有的子 components 也都完成掛載，如果希望全部掛載完成再操作的話，可以使用 vm.$nextTick 來替換 mounted。
🔍 可參考這篇：vue this.$nextTick核心原理剖析
6. router 設定
(1) router-link
<router-link to="/abc" replace></router-link>設置 replace 屬性，當歷史點擊時，會調用 router.replace()，而非 router.push()，所以導航後不會留下記錄。
(2) Vue-Router 模式
- hash mode
預設模式為 hash mode，藉由錨點#，並不會觸發重新載入頁面，而且會記錄在瀏覽器的 session history 中，可利用上一頁回到原本位置。
- history mode
history mode 後端的配置須加上「如果 URL 匹配不到靜態資源，就都導到index 頁面」的程式碼，也代表把路由的權限全都移交給前端去控制。主要原理是基於 History API 來實現，藉由 HTML5 的 history.pushState()。
7. Keep-alive
組件沒有被銷毀掉的話，組件上掛載的數據就還存在，所以狀態就可以保留，所以，keep-alive就可以保持組件的狀態。
🔍 可參考這篇：vue中的keep-alive的用法详细讲解
