1. Vue實(shí)例
每個(gè) Vue 應(yīng)用都是通過(guò)用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的。
常用實(shí)例屬性
app.$data
app.$props
app.$el
Vue 實(shí)例使用的根 DOM 元素。
app.$root
當(dāng)前組件樹的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會(huì)是其自己。
app.$options
獲取定義在data外的數(shù)據(jù)和方法。
app.$children
當(dāng)前實(shí)例的直接子組件。
app.$slots
獲取被插槽分發(fā)的內(nèi)容。
app.$scopedSlots
獲取具名插槽。
app.$refs
獲取注冊(cè)過(guò)refs的所有DOM元素和組件實(shí)例。
app.$isServer
Vue是否運(yùn)行于服務(wù)端。
常用實(shí)例方法
app.$destroy()
主動(dòng)銷毀該實(shí)例。
app.$mount('#root')
掛載DOM。
app.$watch
觀察 Vue 實(shí)例上的一個(gè)表達(dá)式或者一個(gè)函數(shù)計(jì)算結(jié)果的變化。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。
app.$forceUpdate()
迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
app.$nextTick()
使回調(diào)函數(shù)在 DOM 更新完成后被調(diào)用。
Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。
為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。
2. 生命周期方法
beforeCreate()
實(shí)例被創(chuàng)建之前執(zhí)行。在生命周期過(guò)程中只執(zhí)行一次。
created()
實(shí)例創(chuàng)建完成之后執(zhí)行。在生命周期過(guò)程中只執(zhí)行一次。
beforeMount()
掛載組件之前（如果有掛載組件的操作）。在生命周期過(guò)程中只執(zhí)行一次。
mounted()
組件掛載之后。在生命周期過(guò)程中只執(zhí)行一次。
beforeUpdate()
組件更新前。
updated()
組件更新完成。
beforeDestroy()
組件銷毀前。
destroyed()
組件被銷毀。
3. Vue數(shù)據(jù)綁定
綁定變量：v-bind
綁定事件：v-on
綁定樣式： :class="{active : isActive}"
4. computed和watch使用場(chǎng)景和方法
computed是計(jì)算屬性（通過(guò)其他變量計(jì)算得來(lái)的另一個(gè)屬性），在相關(guān)響應(yīng)式依賴發(fā)生變化時(shí)它們才會(huì)重新求值。
watch是偵聽器，來(lái)響應(yīng)數(shù)據(jù)的變化，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式最有用。
computed和watch都不要去改變自己監(jiān)聽的屬性，而是要去生成一個(gè)新的值，否則會(huì)觸發(fā)無(wú)限循環(huán)。
5. Vue原生指令
v-if 和 v-show 的區(qū)別
v-if=false生效時(shí)會(huì)使節(jié)點(diǎn)不存在在DOM流中，會(huì)動(dòng)態(tài)增刪節(jié)點(diǎn)，比較耗能；
v-show只是在節(jié)點(diǎn)上加上display:none。
v-if可配合v-else-if、v-else使用。
v-for和v-if的優(yōu)先級(jí)
v-for的優(yōu)先級(jí)高于v-if，所以在兩者同時(shí)使用時(shí)，v-if會(huì)作用于每一個(gè)v-for循環(huán)上。
6. Vue組件繼承
const ComVue = Vue.extend(Component)
繼承的組件的prop需要通過(guò)propsData傳入，data可以直接改變。
7. 插槽
需求：有一些內(nèi)容，是在調(diào)用組件時(shí)根據(jù)場(chǎng)景去寫的。
子組件：
<div class="container">
<slot></slot>
</div>
父組件使用子組件時(shí)：
<base-layout>
123
</base-layout>
<slot></slot>的內(nèi)容將被123代替。
具名插槽：使用組件時(shí)，用slot="name"指定將內(nèi)容放在何處。
子組件：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父組件使用子組件時(shí)：
使用時(shí)：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
注意：一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”。
作用域插槽
需求：插槽內(nèi)容能夠訪問(wèn)子組件中才有的數(shù)據(jù)。
子組件：
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
父組件中使用：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
