【Vue】Re03 computed屬性計算和ES6的一些補充
阿新 • • 發佈：2020-10-26
一、Computed屬性計算
四種計算處理的方式方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 計算屬性 computed --> <div id="v"> <!-- 變數憑藉直接顯示處理 --> <h3>{{firstName}} {{lastName}}</h3> <!-- 第二種：在模板語法內運算處理 --> <h3>{{firstName + " " + lastName}}</h3> <!-- 第三種：使用方法進行處理 --> <h3>{{splicingStr()}}</h3> <!-- 第四種：使用方法的定義，宣告在computed中，嵌入模板使作為變數使用 --> <h3>{{splicingStr2}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#v', data : { firstName : 'Dai', lastName : 'Zeal4J' }, methods : { splicingStr : function () { return this.firstName + ' ' + this.lastName; }, }, computed : { splicingStr2 : function () { return this.firstName + ' ' + this.lastName; } } }); </script> </body> </html>
如果計算邏輯更為複雜，使用computed選項的處理：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 為了顯示總價格，雖然可以在模板語法內進行計算，但不建議 --> <div id="v"> <h3>價格合計 ： {{getBookSum}}</h3> <h3>價格合計 ： {{getBookSumByForIn}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { bookList : [ { id : 1, name : 'Unix程式設計', price : 100 }, { id : 2, name : '深入理解計算機原理', price : 100 }, { id : 3, name : '現代作業系統', price : 100 }, { id : 4, name : '程式碼大全', price : 100 } ] }, computed : { getBookSum : function () { let sum = 0; for (let i = 0; i < this.bookList.length; i++) { sum += this.bookList[i].price; } return sum; }, getBookSumByForIn : function () { // 使用ES6語法 let sum = 0; for (let book of this.bookList) { sum += book.price; } return sum; } } }); </script> </body> </html>
setter&getter屬性概述：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../dependencies/vue.js"></script> </head> <body> <div id="v"> </div> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { firstName : 'nico', lastName : 'jacob' }, computed : { fullName : { set : function (newVal) { // 如果要設定就需要傳入形參中處理 // 因為一般不怎麼作用於修改屬性值，set用不上 -> 不寫了 }, get : function () { // 處理計算的邏輯都放在這個裡面，所以省略開始直接物件名稱銜接方法處理 return 0; } } } }); </script> <!-- computed 和 method的區別在於? computed具備快取特性，多次重複性呼叫將會觸發快取 method則不具備，方法呼叫一次就重新賦值一次 如果是重複性的頻率高的獲取，可以使用computed更好，減少記憶體消耗 --> </body> </html>
computed & methods的區別？
methods不具備快取功能
/* 計算屬性，用於處理一些屬性合計或者需要計算得到的結果值 */
/* 這裡雖然是一個方法，但是使用上看是作為一個屬性進行操作 */
/* 要注意一個問題，data中的屬性的值發生變化，那麼將會重新呼叫computed內的函式，，並渲染 */
/* 當computed內部的函式被呼叫兩次以上的情況，如果裡面涉及的屬性值沒有發生改變，則使用快取的值進行渲染 */
演示案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="v"> <h3>{{getFullName()}}</h3> <h3>{{getFullName()}}</h3> <h3>{{getFullName()}}</h3> <hr> <h3>{{getFullNameByCompute}}</h3> <h3>{{getFullNameByCompute}}</h3> <h3>{{getFullNameByCompute}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const v = new Vue({ el : '#v', data : { firstName : 'kobe', lastName : 'bryant' }, methods : { getFullName() { let fullName = this.firstName + this.lastName; console.log('methods -> ' + fullName); return fullName; } }, computed : { getFullNameByCompute() { let fullName = this.firstName + this.lastName; console.log('computed -> ' + fullName); return fullName; } } }); </script> </body> </html>
二、ES6相關
1、塊級作用域，Let變數關鍵字和Var變數關鍵字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按鈕01</button> <button>按鈕02</button> <button>按鈕03</button> <button>按鈕04</button> <button>按鈕05</button> <script type="text/javascript"> // 程式碼塊內的作用域問題 { var a = 100; let b = 200; console.log("in codeBlock var a -> " + a); console.log("in codeBlock let b -> " + b); } console.log("out codeBlock var a -> " + a); // console.log("out codeBlock let b -> " + b); // 出作用域 let修飾的變數將會報錯無法獲取 // --------------------------------------------------------------------------------------------------------- // 函式問題 var fun; if (true) { var txt = '列印的內容'; fun = function () { console.log(txt); } } // 在呼叫的時候 txt變數可能被改變 txt = '更改的內容'; fun(); // --------------------------------------------------------------------------------------------------------- // for中的塊級作用域問題 var buttons = document.getElementsByTagName('button'); // for (var i = 0; i < buttons.length; i++) { // buttons[i].addEventListener('click', function () { // console.log(('第' + i + '個按鈕被點選')); // 第5個按鈕被點選 無論點選哪一個按鈕都是顯示第五個按鈕被點選 // }); // } // 使用閉包解決問題 for (var i = 0; i < buttons.length; i++) { (function (ii) { // 這一行的i只是一個形參,和外部的ib buttons[ii].addEventListener('click', function () { console.log(('第' + (ii + 1) + '個按鈕被點選')); }); })(i); } // 為什麼閉包能夠解決上述的問題？因為函式具有作用域的功能 // 使用let則不會存在這個問題 for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function () { console.log(('第' + (i + 1) + '個按鈕被點選')); }); } // --------------------------------------------------------------------------------------------------------- </script> </body> </html>
2、Const常量定義關鍵字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> // const 常量修飾 // 宣告變數時優先使用const定義，如果變數需要被改變賦值再使用let進行修飾 // 1、const宣告的常量不允許二次賦值 const val = 100; // val = 200; × // 2、const宣告的常量不允許不賦值 // const val2; × 宣告即必須賦值 // 3、如果 const常量指向的是一個物件，則不可以改變物件的指向，但是物件的屬性可以被更改 const obj = { name : 'objectA', }; // obj = {}; × 不允許重新賦值一個新物件 obj.name = 'ooo'; // 屬性允許重新賦值 </script> </body> </html>
3、物件字面量和函式的增強：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 物件字面量增強 --> <script> /* 常規JS建立物件寫法 */ const obj = new Object(); /* 字面量JS建立物件寫法 */ const literalObj = {}; /* ES5屬性賦值寫法 */ const p1 = { key1 : 100, key2 : 'aaa', key3 : true } /* ES6支援外部變數同名賦值 */ const key4 = 50; const key5 = 'bbb'; const key6 = false; const p2 = { key4, key5, key6 } console.log(p2); /* ES5的方法宣告 */ const m1 = { set : function (val1, val2) { }, get : function () { return 100; } } /* ES6支援方法宣告的增強 */ const m2 = { set(val1, val2) { }, get() { return 100; } } </script> </body> </html>
4、對JS物件的比較判斷處理方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> /* JS物件不能像後端程式語言一樣，使用地址值進行判斷是否為同一個物件 */ const getObject = function() { return { name : 'aaa', age : 22, gender : true } } /* 這裡使用函式獲取三個物件 */ const obj1 = getObject(); const obj2 = getObject(); const obj3 = getObject(); /* 如果三者都為同一個物件，則對obj1修改屬性，其23都將改變，反之三者不是同一個物件 */ obj1.age = 33; /* 列印結果 */ console.log(obj1); console.log(obj2); console.log(obj3); /* 如果是這樣返回的物件，就是返回一個地址，三者都為同一個物件 */ const finalObject = { name : 'bbb', age : 44, gender : false } const getObject2 = function() { return finalObject; } const obj4 = getObject2(); const obj5 = getObject2(); const obj6 = getObject2(); obj4.age = 88; console.log(obj4); console.log(obj5); console.log(obj6); </script> </body> </html>