Vue.js 计算属性

最新推荐文章于 2025-03-03 09:15:26 发布

Tong XU

最新推荐文章于 2025-03-03 09:15:26 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_41700374/article/details/88949299

vue 专栏收录该内容

17 篇文章

订阅专栏

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试示例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>

	<body>

		<div id="app">
			<p>原始字符串：{{ message }}</p>
			<p>计算后反转字符串：{{ reversedMessage }}</p>
			<p>使用方法后反转字符串：{{ reversedMessage2() }}</p>
		</div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Runoob!'
				},
				computed: {
					reversedMessage: function(){
						
						return this.message.split('').reverse().join('');
					}
				},
				methods: {
					reversedMessage2: function(){
						
						return this.message.split('').reverse().join('');
					}
				}
			});
		</script>
		
	</body>
</html>

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。