原理：在創建Vue實例時，Vue會遍歷data選項的屬性，利用Object.defineProperty()為屬性添加getter和setter對數據的讀取進行劫持（getter用來依賴手機，setter用來派發更新），並且在內部追蹤依賴，在屬性被訪問和修改時通知變化。每個組件實例會有相應的watcher實例，會在組件渲染過程中記錄依賴的所有數據屬性，之後依賴項被改動時，setter方法會通知依賴與此data的watcher實例重新計算（派發更新），從而使它關聯的組件重新渲染。
壹句話總結：vue.js采用數據劫持結合發布-訂閱模式，通過Object.defineProperty()來劫持各個屬性的setter、getter，在數據變動時發布消息給訂閱者，觸發響應的監聽回調。
我的理解：在new Vue的時候，在Observer中通過Object.defineProperty()達到數據劫持，代理所有數據的getter和setter屬性，在每次觸發setter的時候，都會通過Dep來通知Watcher，Watcher作為Observer數據監聽器與Compile模板解析器之間的橋梁，當Observer監聽到數據發生改變的時候，通過Updater來通知Compile更新視圖。而Compile通過Watcher訂閱對應數據，綁定更新函數，通過Dep來添加訂閱者，達到雙向綁定。
Vue實例從創建到銷毀的全過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載DOM->渲染、更新->渲染、卸載等壹系列過程。
它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
它可以分為8個階段：創建前/後、載入前/後、更新前/後、銷毀前/後。
第壹次頁面加載時會觸發beforeCreate、created、beforeMounted、mounted
DOM渲染在mounted中就已經完成。
1、beforeCreate：可以在這加個loading事件，在加載實例時觸發；
2、created：初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用；
3、mounted：掛載元素，獲取DOM節點；
4、updated：如果對數據統壹處理，在這裏寫上相應函數；
5、beforeDestroy：可以放壹個確認停止事件的確認框；
6、nextTick：更新數據後立即操作DOM。
1、對象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2、數組方法v-bind:class="[class1, class2]"
3、行內v-bind:style="{color: color, fontSize: fontSize+'px'}"
1、router-link標簽會渲染為標簽，咋填template中的跳轉都是這種；
2、另壹種是編輯式導航，也就是通過js跳轉比如router.push('/home')
M- model ，model 表示數據模型，也可以在model中定義數據修改和操作的業務邏輯
V- view，view表示視圖，它負責將數據模型轉換為視圖展示出來
VM- viewmodel，viewmodel是壹個同步view和model的對象，連接view和model，用於監聽數據模型的改變和控制視圖行為
computed：computed是計算屬性，也就是計算值，更多用於計算值的場景。它具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下壹次獲取computed的值時重新調用對應的getter來計算。
watch：watch更多的是觀察作用，類似於某些數據的監聽回調，用於觀察props、$emit或者本組件的值，當數據變化時用來執行回調進行後續操作。它不具有緩存性，頁面重新渲染時值不會變化也不會執行。
在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的，但是也得慎用，樣式不易改變。
解決方法：
① 使用混合型的css樣式，混合使用全局樣式和私有樣式。
② 深度作用選擇器：如果妳希望scoped樣式中的壹個選擇器能夠作用的更深，可以使用>>>操作符。如：<style scoped>.a>>>.b{/ ... /}</style>
壹個元素綁定多個事件的寫法有兩種：
1、修飾符的使用
2、在method方法裏分別寫兩個事件
Vue組件中的data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用，如果data值為對象，將導致多個實例***享壹個對象，其中壹個組件改變data屬性值，其它實例也會受到影響。
原理：JS執行是單線程的，它是基於事件循環的。所有同步任務都在主線程上執行，形成壹個執行棧。主線程之外，還存在壹個任務隊列，只要異步任務有了運行結果，就在任務隊列中放置壹個事件。壹旦執行棧中的所有同步任務執行完畢，系統就會讀取任務隊列，看看那些對應的異步任務，等結束等待狀態，進入執行棧，開始執行。主線程不斷重復上面的步驟。主執行的執行過程就是tick，所有的異步結果都是通過任務隊列來調度的。任務分為兩大類：宏任務和微任務，宏任務包括：setTimeOut等，微任務包括promise.then。
Vue用異步隊列的方式來控制DOM更新和nextTick回調先後執行。在下次DOM更新循環結束之後執行延遲回調，nextTick主要使用了宏任務和微任務，nextTick把要執行的任務推入壹個隊列中，在下壹個tick同步執行隊列的所有任務，它是異步任務中的微任務。如果我們在更新了壹個響應式數據後，需要同步拿到這個渲染後的DOM結果，就使用nextTick方法，異步拿這個結果。
使用方式：
① this. nextTick.then(cb); 異步
父組件調用子組件的方法
父組件： this.$refs.yeluosen.childMethod()
子組件向父組件傳值並調用方法： $emit
組件之間： bus==$emit+$on
1、第壹種方法是直接在子組件中通過this. emit向父組件觸發壹個事件，父組件監聽這個事件就行了。
3、第三種都可以實現子組件調用父組件的方法。
keep-alive是Vue內置的壹個組件，可以使被包含的組件保留狀態，或避免重新渲染。
原來的組件實例會被復用。這也意味著組件的生命周期鉤子不會再被調用，妳可以簡單的監控watch $route對象：
is用來動態切換組件，DOM模板解析
全局的：前置守衛、後置鉤子（beforeEach、afterEach）beforeResolve
單個路由獨享的：beforeEnter
組件級的：beforeRouteEnter（不能獲取組件實例this）、beforeRouteUpdate、beforeRouteLeave
這是因為在執行路有鉤子函數beforeRouteEnter的時候，組件還沒有被創建出來，先執行beforeRouteEnter，再執行周期鉤子函數beforeCreate，可以通過next獲取組件的實例對象，如：next((vm) => {})，參數vm就是組件的實例化對象。
缺點：
優點：
計算屬性是需要復雜的邏輯，可以用方法method代替。
vue-cli提供的腳手架模板有browserify和webpack。
① 是什麽？
Vue框架中的狀態管理，分別是State、Getter、Mutation、Action、Module。
② 怎麽使用？
新建壹個目錄store。
③ 功能場景？
單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車等。
④ vuex的狀態：
a. State特性：vuex就是壹個倉庫，倉庫裏面放了很多對象，其中state就是數據源存放地，對應於壹般Vue對象裏面的data。state裏面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新。它通過mapState把全局的state和getters映射到當前組件的computed計算屬性中。
b. Getter特性：getters可以對State進行計算操作，它就是store的計算屬性。雖然在組件內可以做計算屬性，但是getters可以在多組件之間復用。如果壹個狀態只在壹個組件內使用，可以不用getters。
c. Mutation特性：改變store中state狀態的唯壹方法就是提交mutation，每個mutation都有壹個字符串類型的事件類型和壹個回調函數，我們需要改變state的值就要在回調函數中改變。我們要執行這個回調函數，那我們需要執行壹個相應的調用方法：store.commit。
d. Action特性：類似於mutation，不同點在於：Action提交的是mutation，而不是直接變更狀態。Action可以包含任意異步操作，Action函數接受壹個與store實例具有相同方法和屬性的context對象，因此妳可以調用context.commit提交壹個mutation。或者通過context.state和context.getters來獲取state和getters。Action通過store.dispatch方法觸發：store.dispatch('increment')。
e. Module特性：Module其實只是解決了當state中很復雜臃腫的時候，module可以將store分解為模塊，每個模塊中擁有自己的state、mutation、action和getter。
① 創建組件頁面eg Toast.vue
② 用Vue.extend() 擴展壹個組件構造器，再通過實例化組件構造器，就可以創造出可復用的組件。
③ 將toast組件掛載到新創建的div上；
④ 將toast組件的dom添加到body裏；
⑤ 修改優化達到動態控制頁面顯示文字跟顯示時間；
修飾符分為：壹般修飾符、事件修飾符、按鍵、系統
① 壹般修飾符：
② 事件修飾符
③ 按鍵修飾符
④ 系統修飾符（可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。）
Vue的核心的功能，是壹個視圖模板引擎，但這不是說Vue就不能成為壹個框架。在聲明式渲染（視圖模板引擎）的基礎上，我們可以通過添加組件系統、客戶端路由、大規模狀態管理來構建壹個完整的框架。更重要的是，這些功能相互獨立，妳可以在核心功能的基礎上任意選用其他的部件，不壹定要全部整合在壹起。可以看到，所說的“漸進式”，其實就是Vue的使用方式，同時也體現了Vue的設計的理念
在我看來，漸進式代表的含義是：主張最少。視圖模板引擎每個框架都不可避免會有自己的壹些特點，從而會對使用者有壹定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
比如說，Angular，它兩個版本都是強主張的，如果妳用它，必須接受以下東西：
必須使用它的模塊機制- 必須使用它的依賴註入- 必須使用它的特殊形式定義組件（這壹點每個視圖框架都有，難以避免）所以Angular是帶有比較強的排它性的，如果妳的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來壹些困擾。
Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，妳可以在原有大系統的上面，把壹兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配妳自己設計的整個下層用。也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。
漸進式的含義，我的理解是：主張最少，沒有多做職責之外的事。