欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

计算属性和侦听器

程序员文章站 2022-05-17 07:50:47
...

1. 计算属性computed

<div id="app">
	<p>Original message: "{{ message }}"</p>
	<p>Computed reversed message: "{{ reversedMessage }}"</p>
	<p>Computed reversed message2: "{{ reversedMessage2() }}"</p>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello'
	},
	computed: {
		// 计算属性的 getter
		reversedMessage: function () {
			return this.message.split('').reverse().join('')
		}
	},
	methods: {
		reversedMessage2: function () {
			return this.message.split('').reverse().join('')
		}
	}
})

这里我们声明了一个计算属性 reversedMessage,你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的。

2. 计算属性 vs 方法

通过上述例子我们可以通过在表达式中调用方法reversedMessage2来达到同样的效果
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

3. 计算属性的setter

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

// ...
computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}
// ...

现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

4. 侦听器 watch

使用场景:当需要在数据变化时执行异步或开销较大的操作时,使用 watch 选项,它允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

使用范例:

new Vue({
	el: '#watch-example',
	data: {
		question: '',
		answer: 'I cannot give you an answer until you ask a question!'
	},
	watch: {
   		// 如果 `question` 发生改变,这个函数就会运行
		question: function (newQuestion, oldQuestion) {
			this.answer = 'Waiting for you to stop typing...'
			this.debouncedGetAnswer()
		}
	}
	// ...
}