VUE课程参考---17、计算属性
一、总结
一句话总结：
vue的计算属性可以用来根据vue中data中的值的变化，自动变化计算的值，比如fullname变化的时候自动更新firstname和lastname，计算属性可以用来简化模板中的的复杂的js表达式
computed:{
fullName:function () {
console.log('fullName');
return this.firstName+'-'+this.lastName;
},
//这里是对象
fullName3:{
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get:function() {
console.log('fullName3-get');
return this.firstName+'-'+this.lastName;
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set:function(value) {
console.log('fullName3-set');
const names = value.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
},
1、vue的计算属性的写法形式？
1、只写get：computed里面放一个函数：例如fullName:function (){}
2、get和set一起写：computed里面放一个对象：例如fullName3:{get:function(){},set:function(value){}}
computed:{
fullName:function () {
console.log('fullName');
return this.firstName+'-'+this.lastName;
},
//这里是对象
fullName3:{
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get:function() {
console.log('fullName3-get');
return this.firstName+'-'+this.lastName;
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set:function(value) {
console.log('fullName3-set');
const names = value.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
},
2、方法和计算属性的区别？
VUE中的方法和计算属性可以实现同样的功能，区别就是计算属性有基于响应式依赖的缓存（也就是计算属性依赖的数据改变缓存才会改变），而方法没有，需要缓存的话就用计算属性。
<div id="app"> <p>Original message: "{{ message }}"</p> <hr> <p>计算属性1: "{{ reversedMessage }}"</p> <p>计算属性2: "{{ reversedMessage }}"</p> <p>计算属性3: "{{ reversedMessage }}"</p> <hr> <p>方法1: "{{ reversedMessage2() }}"</p> <p>方法2: "{{ reversedMessage2() }}"</p> <p>方法3: "{{ reversedMessage2() }}"</p> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { message: '我有一只小毛驴，我永远也不骑' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 console.log('计算属性：reversedMessage'); for (let i=1;i<=100000;i++){ } return this.message.split('').reverse().join('')+'：'+Date.now(); } }, methods: { //用方法实现同样功能 reversedMessage2: function () { console.log('方法：reversedMessage2'); for (let i=1;i<=100000;i++){ } return this.message.split('').reverse().join('')+'：'+Date.now(); } } }); </script>
3、vue中计算属性为什么要有缓存？
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！
二、计算属性
博客对应课程的视频位置：
1、计算属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算属性</title> 6 </head> 7 <body> 8 <!-- 9 10 vue的计算属性可以用来根据vue中data中的值的变化，自动变化计算的值，比如fullname变化的时候自动更新firstname和lastname，计算属性可以用来简化模板中的的复杂的js表达式 11 12 vue的计算属性的写法形式 13 1、只写get：computed里面放一个函数：例如fullName:function (){} 14 2、get和set一起写：computed里面放一个对象：例如fullName3:{get:function(){},set:function(value){}} 15 16 17 18 --> 19 <div id="app"> 20 <label> 21 FirstName：<input type="text" v-model="firstName"><br> 22 </label> 23 <label> 24 LastName：<input type="text" v-model="lastName"><br> 25 </label> 26 <label> 27 FullName（计算属性（单向））：<input type="text" v-model="fullName"><br> 28 </label> 29 <label> 30 FullName2（使用方法）：<input type="text" :value="calcFullName()"><br> 31 </label> 32 <label> 33 FullName3（计算属性（双向））：<input type="text" v-model="fullName3"><br> 34 </label> 35 </div> 36 <script src="../js/vue.js"></script> 37 <script> 38 let vm = new Vue({ 39 el: '#app', 40 data: { 41 firstName:'', 42 lastName:'', 43 }, 44 methods:{ 45 calcFullName:function () { 46 console.log('calcFullName'); 47 return this.firstName+'-'+this.lastName; 48 } 49 }, 50 computed:{ 51 fullName:function () { 52 console.log('fullName'); 53 return this.firstName+'-'+this.lastName; 54 }, 55 //这里是对象 56 fullName3:{ 57 // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 58 get:function() { 59 console.log('fullName3-get'); 60 return this.firstName+'-'+this.lastName; 61 }, 62 // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 63 set:function(value) { 64 console.log('fullName3-set'); 65 const names = value.split('-'); 66 this.firstName = names[0]; 67 this.lastName = names[1]; 68 } 69 } 70 } 71 }); 72 </script> 73 </body> 74 </html>
2、计算属性和方法的区别
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算属性和方法的区别</title> 6 </head> 7 <body> 8 <!-- 9 1、 10 计算属性和方法的区别 11 VUE中的方法和计算属性可以实现同样的功能， 12 区别就是计算属性有基于响应式依赖的缓存，而方法没有， 13 需要缓存的话就用计算属性。 14 15 2、 16 vue中计算属性为什么要有缓存 17 假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！ 18 19 20 --> 21 <div id="app"> 22 <p>Original message: "{{ message }}"</p> 23 <hr> 24 <p>计算属性1: "{{ reversedMessage }}"</p> 25 <p>计算属性2: "{{ reversedMessage }}"</p> 26 <p>计算属性3: "{{ reversedMessage }}"</p> 27 <hr> 28 <p>方法1: "{{ reversedMessage2() }}"</p> 29 <p>方法2: "{{ reversedMessage2() }}"</p> 30 <p>方法3: "{{ reversedMessage2() }}"</p> 31 </div> 32 <script src="../js/vue.js"></script> 33 <script> 34 let vm = new Vue({ 35 el: '#app', 36 data: { 37 message: '我有一只小毛驴，我永远也不骑' 38 }, 39 computed: { 40 // 计算属性的 getter 41 reversedMessage: function () { 42 // `this` 指向 vm 实例 43 console.log('计算属性：reversedMessage'); 44 for (let i=1;i<=100000;i++){ 45 46 } 47 return this.message.split('').reverse().join('')+'：'+Date.now(); 48 } 49 }, 50 methods: { 51 //用方法实现同样功能 52 reversedMessage2: function () { 53 console.log('方法：reversedMessage2'); 54 for (let i=1;i<=100000;i++){ 55 56 } 57 return this.message.split('').reverse().join('')+'：'+Date.now(); 58 } 59 } 60 }); 61 </script> 62 </body> 63 </html>
