VUE疑难问题---2、方法和计算属性的区别

转载

mob604756fa6ad7 2020-04-20 08:01:00

文章标签 VUE疑难问题 sed 缓存 i++ 微信 文章分类 代码人生

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>