[TOC] ## **1. `watch`屬性的使用** ### 1.1 監聽`data`中屬性的改變：  ~~~ <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> ~~~ ~~~ <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: {}, watch: { // 使用這個 屬性，可以監視 data 中指定數據的變化，然后觸發這個 watch 中對應的 function 處理函數 'firstname': function (newVal, oldVal) { this.fullname = newVal + '-' + this.lastname }, 'lastname': function (newVal) { this.fullname = this.firstname + '-' + newVal } } }); </script> ~~~ 2. 監聽路由對象的改變： ~~~ <div id="app"> <router-link to="/login">登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> <script> var login = Vue.extend({ template: '<h1>登錄組件</h1>' }); var register = Vue.extend({ template: '<h1>注冊組件</h1>' }); var router = new VueRouter({ routes: [ { path: "/login", component: login }, { path: "/register", component: register } ] }); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router, watch: { '$route.path'': function (newVal, oldVal) { if (newVal.path === '/login') { console.log('這是登錄組件'); } } } }); </script> ~~~ ## **2.`computed`計算屬性的使用** ### **使用computed的計算值，給子組件傳值（多方計算得到），在vuex中解決axios異步加載問題** * **這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 立即重新計算 這個 計算屬性的值** * 計算屬性的求值結果，會被緩存起來，方便下次直接使用；**如果 計算屬性方法中，所以來的任何數據，都沒有發生過變化，則，不會重新對 計算屬性求值** ``` computed: { fullName() { return this.firstName + ' - ' + this.lastName; } ``` **firstName和this.lastName任何一個值發生變化都會引起fullName的重新計算，** 可以說computed比watch監控的個數多 **1. 默認只有`getter`的計算屬性：** ~~~ <div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: {}, computed: { // 計算屬性； 特點：當計算屬性中所以來的任何一個 data 屬性改變之后，都會重新觸發 本計算屬性 的重新計算，從而更新 fullName 的值 fullName() { return this.firstName + ' - ' + this.lastName; } } }); </script> ~~~ **2. 定義有`getter`和`setter`的計算屬性：** 當對計算值賦值的時候，會調用computed的set方法（賦值會傳遞給set方法） 例如：fullName就是計算值，firstName和lastName可以理解為監控值，都是data的屬性 ``` fullName() { return this.firstName + ' - ' + this.lastName; } ``` 完整實例 ~~~ <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <!-- 點擊按鈕重新為 計算屬性 fullName 賦值 --> <input type="button" value="修改fullName" @click="changeName"> <span>{{fullName}}</span> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen' }, methods: { changeName() { this.fullName = 'TOM - chen2'; //調用計算值的set方法，因為是賦值操作 } }, computed: { fullName: { get: function () { return this.firstName + ' - ' + this.lastName; }, set: function (newVal) { var parts = newVal.split(' - '); this.firstName = parts[0]; this.lastName = parts[1]; } } } }); </script> ~~~ ## 3. **`watch`、`computed`和`methods`之間的對比** watch監控一個值的變化，computed 監控其他的相關值得變化，重新計算這個值，例如 c= a + b ,a和b發生變化，那就要重新計算c 1. `computed`屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用； 2. `methods`方法表示一個具體的操作，主要書寫業務邏輯； 3. `watch`一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是`computed`和`methods`的結合體； ## 4. 坑 **=>箭頭表達式獲取不到this對象引用的值** ~~~ props: ['vcaInstance', 'queryKeyAlgorithms', 'algorithm'], watch: { 'algorithm.name': (newAlgorithm, oldAlgorithm) => { //監控下拉選值變化 console.log("算法改變了" + newAlgorithm); let algorithms = this.queryKeyAlgorithms; for(let i=0; i < algorithms.length; i++){ if(algorithms[i].name === newAlgorithm) { this.algorithm.zacou = algorithms[i].sub.hashAlgoName; } } }, }, ~~~  **function匿名函數this指向運行時實際調用該方法的對象。** **\=>沒有自己的this，這里this在編寫時已經確定**。 改成function解決 ~~~ watch: { 'algorithm.name': function(newAlgorithm, oldAlgorithm){ //監控下拉選值變化 console.log("算法改變了" + newAlgorithm); let algorithms = this.queryKeyAlgorithms; for(let i=0; i < algorithms.length; i++){ if(algorithms[i].name === newAlgorithm) { this.algorithm.zacou = algorithms[i].sub.hashAlgoName; } } }, }, ~~~ ## **4. `nrm`的安裝使用** 作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務器地址；什么是鏡像：原來包剛一開始是只存在于國外的NPM服務器，但是由于網絡原因，經常訪問不到，這時候，我們可以在國內，創建一個和官網完全一樣的NPM服務器，只不過，數據都是從人家那里拿過來的，除此之外，使用方式完全一樣； 1. 運行`npm i nrm -g`全局安裝`nrm`包； 2. 使用`nrm ls`查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址； 3. 使用`nrm use npm`或`nrm use taobao`切換不同的鏡像源地址；