Vue学习笔记（二）——比较计算属性和侦听属性

忘是亡心i 2022-03-17 02:46 302阅读 0赞

参考文档：[https://cn.vuejs.org/v2/guide/computed.html][https_cn.vuejs.org_v2_guide_computed.html]

官方文档提到在大多数的场景下使用计算属性是最合适的，只有在少部分特殊场景下需要使用侦听属性。但侦听属性可以配置监听深度（默认是浅监听），而官方文档却没有说明计算属性的监听深度，这是由于对计算属性来说，计算属性的值只依赖于导致计算属性发生变化的变量。

**换句话说：如果导致计算属性发生变化的变量是某个对象的属性，计算属性不会监听整个对象（但侦听属性会，故有浅监听和深度监听的配置），而只会监听对象中会导致计算属性发生变化的属性。所以，当可以用计算属性替代侦听属性，尽量使用计算属性，计算属性监听的精准性和缓存机制会大大提升代码的性能。**

下面用一个例子来说明：

计算属性和侦听属性都只依赖于变量obj对象的attrs属性，当修改变量obj的type属性，可以看到计算属性没有重新计算而是使用了之前的缓存，而侦听属性则触发了重新计算（这表示计算属性只监听了obj对象的attrs属性，而侦听属性则监听了整个obj对象）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]

当修改变量obj的attrs属性时，计算属性和侦听属性都触发了重新计算：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]

但在存在异步行为时，计算属性就无能为力了，此时必须使用侦听属性（在官网侦听器一节也有详细示例来说明侦听属性支持设置异步请求未完成、完成和失败等多个状态时的值）。下面对上例代码稍作调整：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    </head>
    <body>
    <div id="main">
        <span>name:</span>
        <input type="text" v-model="obj.attrs.name">
        <br>
        <span>type:</span>
        <input type="text" v-model="obj.type">
        <br>
        <span>this is computeData:{ { computeData}}</span>
        <br>
        <span>this is watcher:{ { watcher}}</span>
        <br>
    </div>
    </body>
    <script>
        new Vue({ 
            el: '#main',
            data: { 
                obj: { 
                    attrs: { 
                        name: "liqing"
                    },
                    type: "human"
                },
                watcher: ""
            },
            computed: { 
                computeData: function () { 
                    console.log("enter computeData");
                    var result = "hello ";
                    for(var key in this.obj.attrs) { 
                        result += this.obj.attrs[key];
                    }
                    setTimeout(function () { 
                        return result;
                    }, 1000);
                }
            },
            watch: { 
                obj: { 
                    handler: function (newV, oldV) { 
                        console.log("enter watch");
                        var that = this;
                        that.watcher = "计算中...";
                        setTimeout(function () { 
                            that.watcher = "hello " + newV.attrs.name;
                        }, 1000);
                    },
                    deep: true
                }
            }
        })
    </script>
    </html>

此时修改name，可以看到计算属性没有显示正确的结果，而侦听属性则正常工作（先显示“计算中…”，然后显示了正确的结果），这是由于Vue不能感知异步请求触发的变量变更导致的（这和angularJS中异步请求修改作用域内变量不生效是类似的）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 2]  
当需要通过异步请求为变量赋值时，不能使用计算属性而应该使用侦听属性。

[https_cn.vuejs.org_v2_guide_computed.html]: https://cn.vuejs.org/v2/guide/computed.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]: /images/20220317/bd856cfd973a426e9314361c374fb475.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]: /images/20220317/838af6c90c21490cb0ffe1d852f6b083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 2]: /images/20220317/00baf23d8621475a8a9246e5d8d8105b.png