Vue计算属性和侦听器

Posted 2021-01-27 qixidi

计算属性

模板内的表达式非常便利，但是在模板中放入太多的逻辑会让模板过重切难以维护。对于任何复杂逻辑都应该使用计算属性。

<p>{{ reverseMsg }}</>

var vm = new Vue({
    el: ‘#example‘,
    data: {
        message: ‘hello‘
    },
    computed: {
        reverseMsg: function() {
            return this.message
        }
    }
})

这里声明一个计算属性reverseMsg。我们提供的函数将作用属性vm.reverseMsg的getter函数。

我们可以在表达式中调用方法来达到和计算属性相同的作用。但是计算属性是基于它们的依赖缓存的。只有在相关依赖改变的时候才会重新求值。这就意味着只要message没有改变，多次访问reverseMsg还是返回同样的值，而不是执行函数。

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

如上是不会发生改变的，应该不是响应式依赖。

1. 计算属性的setter

计算属性默认只有getter，不过在需要时也可以提供一个setter。

computed: {
    fullName: {
        get: function() {},
        set: function() {
            
        }
    }
}

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

来源：https://segmentfault.com/a/1190000016840663