前端vue学习曲线（6）计算属性

最新推荐文章于 2024-08-18 10:43:25 发布

菜鸟_zhengke

最新推荐文章于 2024-08-18 10:43:25 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42014192/article/details/98489372

vue 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了Vue.js中计算属性(computed)与方法(methods)的使用场景及区别。计算属性基于其依赖进行缓存，只有当依赖发生变化时才会重新计算，而方法则每次调用都会执行。通过实例对比，展示了计算属性在提高应用性能方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性

由来：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

例如：

<div id="example">
    1{{ message.split('').reverse().join('') }}
    2{{ message.split('').reverse().join('') }}
</div>

计算属性表示

<div id="example">
    <p>原始消息message:"{{message}}"</p>
    <p>计算反向原始消息message:"{{reversed}}"</p>
    <p>计算反向原始消息message:"{{reversed}}"</p>
</div>

var vm = new Vue({
		el: "#example",
		data: {
			message: "Hello",
			mag1: "计算属性缓存computed",
			mag2: "方法methods"
		},
		computed: {
			//计算属性的getter
			reversed: function() {
				// `this` 指向 vm 实例
				console.log(this.mag1);
				return this.message.split('').reverse().join('');
			}
		}
	})

计算属性缓存computed VS 方法methods

计算属性缓存computed ：是基于它们的响应式依赖进行缓存的。只要相关依赖改变时才会重新求值。这就意味着只要message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

方法methods：不管 message 有没有发生改变，多次访问 reversedMessage 都必须执行函数。

var vm = new Vue({
		el: "#example",
		data: {
			message: "Hello",
			mag1: "计算属性缓存computed",
			mag2: "方法methods"
		},
		computed: {
			//计算属性的getter
			reversed: function() {
				// `this` 指向 vm 实例
				console.log(this.mag1);
				return this.message.split('').reverse().join('');
			}
		},
		methods: {
			reversedMessage: function() {
				// `this` 指向 vm 实例
				console.log(this.mag2);
				return this.message.split('').reverse().join('');
			}
		}
	})

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="example">
			<h4>计算属性</h4>
			<p>原始消息message:"{{message}}"</p>
			<p>计算反向原始消息message:"{{reversed}}"</p>
			<h4>计算属性缓存vs方法</h4>
			<p>反向消息 message: "{{ reversedMessage() }}"</p>
			<p>
				计算属性缓存computed VS 方法methods<br /> 计算属性缓存computed ：是基于它们的响应式依赖进行缓存的。只要相关依赖改变时才会重新求值。 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
				<br /> 方法methods：不管 message 有没有发生改变，多次访问 reversedMessage 都必须执行函数。
			</p>
		</div>

		<div id="app1">
			{{ fullName }}

		</div>
		<div id="demo">{{ fullName }}</div>
	</body>

</html>
<script>
	var vm = new Vue({
		el: "#example",
		data: {
			message: "Hello",
			mag1: "计算属性缓存computed",
			mag2: "方法methods"
		},
		computed: {
			//计算属性的getter
			reversed: function() {
				// `this` 指向 vm 实例
				console.log(this.mag1);
				return this.message.split('').reverse().join('');
			}
		},
		methods: {
			reversedMessage: function() {
				// `this` 指向 vm 实例
				console.log(this.mag2);
				return this.message.split('').reverse().join('');
			}
		}
	})

	var app1 = new Vue({
		el: "#app1",
		data: {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		},
		watch: {
			firstName(val) {
				this.fullName = val + " " + this.lastName;
				console.log("firstName");
			},
			lastName: function(val) {
				this.fullName = this.firstName + " " + val;
				console.log("lastName");
			}
		}
	})

	var demo = new Vue({
		el: '#demo',
		data: {
			firstName: 'Foo',
			lastName: 'Bar'
		},
		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]
				}
			}
		}
	})
</script>