Vue2.x 计算属性与监听器、方法的比较

2021-02-21

Vue computed vs watch vs methods

在开发vue项目中，可能会经常遇见实现某种功能具体使用哪种方法更好呢？接下来通过一些小案例进行分析（通过在浏览器控制台修改vm.firstName或者vm.lastName得到效果）。

1 计算属性 VS 侦听器

computed：计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变。
watch：Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。
使用计算属性(不需要在data中声明)

<body>
    <div id="app">
        <p>{{fullName}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                firstName: 'Liao',
                lastName: 'Xin',               
            },
            computed: {
                fullName: function(){
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

使用侦听器

<body>
    <div id="app">
        <p>{{fullName}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                firstName: 'Liao',
                lastName: 'Xin',
                fullName: 'Liao Xin'
            },
            watch: {
                firstName: function(val){
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function(val){
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    </script>
</body>

但是，当需要在数据变化时执行异步或开销较大的操作时，推荐使用侦听器。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
在计算属性与侦听器都能够实现同一功能时，推荐使用计算属性，因为代码更加简洁。

2 计算属性 VS 方法

通过表达式调用方法也可以实现同样的效果

<body>
    <div id="app">
        <p>{{fullName()}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                firstName: 'Liao',
                lastName: 'Xin',

            },
            methods: {
                fullName:function(){
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 fullName 还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
所以在下面的代码中，fullName将不会更新，因为Date.now()不是响应式依赖

computed: {
            fullName: function(){
                return Date.now()
            }
        }

在计算属性与方法都能够实现同一功能时，推荐使用计算属性，因为计算属性具有缓存。

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/21/vue-computed-watch-methods/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------