MVVM框架概述

什麼是vue

是一套構建使用者介面的漸進式（用到哪一塊就用哪一塊，不需要全部用上）前端框架，Vue的核心庫只關注檢視層

vue的相容性

Vue.js不支援IE8及其以下版本，因為Vue.js使用了IE8不能模擬的ECMAScript 5特性。Vue.js支援所有相容ECMAScript 5的瀏覽器。

vue學習資源

vue.js中文官網：http://cn.vuejs.org/

vue.js原始碼：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方論壇：forum.vuejs.org

對比其他框架-React

React和Vue有許多相似之處，它們都有使用Virtual DOM；提供了響應式（Reactive）和元件化（Composable）的檢視元件。將注意力集中保持在核心庫，而將其他功能如路由和全域性狀態管理交給相關的庫。React比Vue有更豐富的生態系統

都有支援native的方案，React的RN，vue的Wee下

都支援SSR服務端渲染

都支援props進行父子元件間的通訊

效能方面：React和Vue在大部分常見場景下都能提供近似的效能。通常Vue會有少量優勢，因為Vue的Virtual DOM實現相對更為輕量一些。

不同之處就是：

• 資料繫結方面，vue實現了資料的雙向資料繫結，react資料流動是單向的
• virtual DOM不一樣,vue會跟蹤每一個元件的依賴關係,不需要重新渲染整個元件樹.而對於React而言,每當應用的狀態被改變時,全部元件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命週期函式方法來進行控制
• state物件在react應用中不可變的,需要使用setState方法更新狀態;在vue中,state物件不是必須的,資料由data屬性在vue物件中管理（如果要操作直接this.xxx）
• 元件寫法不一樣, React推薦的做法是JSX ,也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單檔案元件格式,即html,css,js寫在同一個檔案

對比其他框架-angular

在效能方面，這兩個框架都非常的快，我們也沒有足夠的實際應用資料來下一個結論。如果你一定想看些資料的話，你可以參考這個第三方跑分。單就這個跑分來看，Vue似乎比Angular要更快一些。

在大小方面，最近的Angular版本中在使用了AOT和tree-shaking技術後使得最終的程式碼體積減小了許多。但即使如此，一個包含了vuex + vue-router的Vue專案(30kb gzipped)相比使用了這些優化的Angular CLI生成的預設專案尺寸(~130kb)還是要小的多。

靈活性：Vue相比於Angular更加靈活，Vue官方提供了構建工具來協助你構建專案，但它並不限制你去如何組織你的應用程式碼。有人可能喜歡有嚴格的程式碼組織規範，但也有開發者喜歡更靈活自由的方式。

vue.js的核心特點—響應的資料繫結

傳統的js操作頁面：在以前使用js操作頁面的時候是這樣的，需要操作某個html元素的資料，就的使用js程式碼獲取元素然後在處理業務邏輯

響應式資料繫結的方式操作頁面，可以直接使用像下面程式碼那樣的寫法就可以將資料填充到頁面中

1. <template>
2. <div id="app">
3. {{ message }}
4. </div>
5. </template>
7. <script>
8. export default {
9. name: 'app',
10. data () {
11. return {
12. message: 'Welcome to Your Vue.js App'
13. }
14. }
15. }
16. </script>
18. <style>
19. </style>

vue.js的核心特點—可組合的檢視元件

一個頁面對映為元件樹。劃分元件可維護、可重用、可測試，也就是一個頁面由多個元件組合而成

vue中實現元件引入示例

第一步：import匯入需要引入的元件檔案；

第二步：註冊元件；

第三步：在需要引入元件的檔案中加上元件標籤（這個標籤的標籤名就是註冊的元件名字，多個單詞的和這裡有xx-xx的形式）

需要注意的是：元件可以巢狀引入，也就是說元件可以引入其他元件

首先建立一個元件，用於被引入的元件，元件名字叫Hello.vue

1. <template>
2. <div class="hello">
3. <h2>Essential Links</h2>
4. </div>
5. </template>
7. <script>
8. export default {
9. name: 'hello'
10. }
11. </script>
13. <!-- Add "scoped" attribute to limit CSS to this component only -->
14. <style scoped>
16. </style>

然後在需要引入的元件中，先使用import匯入元件

import Hello from './components/Hello'

然後使用components註冊這個元件

1. components: {
2. Hello
3. }

在需要引入元件的檔案中加上元件標籤（這個標籤的標籤名就是註冊的元件名字，多個單詞的和這裡有xx-xx的形式）

<hello></hello>

1. <template>
2. <div id="app">
3. {{ message }}
4. <hello></hello>
5. </div>
6. </template>
8. <script>
9. import Hello from './components/Hello'
10. export default {
11. name: 'app',
12. data () {
13. return {
14. message: 'Welcome to Your Vue.js App'
15. }
16. },
17. components: {
18. Hello
19. }
20. }
21. </script>
23. <style>
24. </style>

單檔案元件：Js，css，html存在一個檔案中，是一個單檔案元件，下面vue模板檔案裡的Hello.vue就是一個單檔案元件

1. <template>
2. <div class="hello">
3. <h2>{{ msg }}</h2>
4. </div>
5. </template>
7. <script>
8. export default {
9. name: 'hello',
10. data () {
11. return {
12. msg: 'Hello Vue'
13. }
14. }
15. }
16. </script>
18. <!-- Add "scoped" attribute to limit CSS to this component only -->
19. <style scoped>
20. h1, h2 {
21. font-weight: normal;
22. }
23. </style>

vue.js的核心特點—虛擬DOM

虛擬DOM的概述

執行的js速度是很快的，大量的操作DOM就會很慢，時常在更新資料後會重新渲染頁面，這樣造成在沒有改變資料的地方也重新渲染了DOM節點，這樣就造成了很大程度上的資源浪費。

利用在記憶體中生成與真實DOM與之對應的資料結構，這個在記憶體中生成的結構稱之為虛擬DOM

當資料發生變化時，能夠智慧地計算出重新渲染元件的最小代價並應用到DOM操作上

1. // The Vue build version to load with the `import` command
2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3. import Vue from 'vue'
4. import App from './App'
6. Vue.config.productionTip = false
8. /* eslint-disable no-new */
9. new Vue({
10. el: '#app',
11. template: '<App/>',
12. components: { App }
13. })
15. console.dir(document)

vue.js的核心特點—MVVM模式

MVVM概述：M：Model資料模型 ，V：view檢視模板 ，vm：view-Model：檢視模型

vue的MVVM例項（雙向資料繫結）：當輸入框輸入資料的時候，相應的message也會改變

1. <template>
2. <div id="app">
3. <input type="text" v-model="message"/>
4. {{ message }}
5. </div>
6. </template>
8. <script>
9. export default {
10. name: 'app',
11. data () {
12. return {
13. message: 'Welcome'
14. }
15. }
16. }
17. </script>
19. <style>
20. </style>

vue是如何實現雙向資料繫結的：當資料發生改變—自動更新檢視。利用Object.definedProperty中的setter/getter代理資料，監控對資料的操作

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. </head>
7. <body>
8. <input type="text" id="username"><br />
9. <span id="uName"></span>
10. <script>
11. var obj = {
12. pwd: '123'
13. }
14. Object.defineProperty(obj, 'username', {
15. set: function (val) {
16. document.getElementById('uName').innerText = val
17. document.getElementById('uNmae').value = val
18. console.log('set')
19. },
20. get: function () {
21. }
22. })
23. document.getElementById('username').addEventListener('keyup' ,function () {
24. obj.username = event.target.value
25. })
26. </script>
27. </body>
28. </html>

vue.js的核心特點—宣告式渲染

Vue.js的核心是一個允許採用簡潔的模板語法來宣告式的將資料渲染進DOM，初始化根例項，vue自動將資料繫結在DOM模板上

宣告式渲染與命令式渲染區別

宣告式渲染：所謂宣告式渲染只需要宣告在哪裡，做什麼，而無需關心如何實現

命令式渲染：需要具體程式碼表達在哪裡，做什麼，如何實踐

需求：求陣列中每一項的倍數，放在另一個數組中例項

命令式渲染

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. </head>
7. <body>
8. <script>
9. var arr = [1, 2, 3, 4, 5]
10. var newArr = []
11. for (var i = 0; i < arr.length; i++) {
12. newArr.push(arr[i] * 2)
13. }
14. console.log(newArr)
15. </script>
16. </body>
17. </html>

宣告式渲染

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. </head>
7. <body>
8. <script>
9. var arr = [1, 2, 3, 4, 5]
10. var newArr = arr.map(function (item) {
11. return item * 2
12. })
13. console.log(newArr)
14. </script>
15. </body>
16. </html>