VUE疑难问题---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>
1、vue中计算属性为什么要有缓存？
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！
二、方法和计算属性的区别
博客对应课程的视频位置：
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>
