一、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>