Vue 当中的计算属性computed_computed默认值-CSDN博客

本文链接：https://blog.csdn.net/zjpjay/article/details/111246825

1.普通写法举例

2.计算属性写法举例

3. computed vs methods

4. computed setter 和getter

5.总结

计算属性关键词: computed

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

1.普通写法举例

可以看下以下反转字符串的例子：

<div id="app">
	<h2>{{ name.split('').reverse().join('') }}</h2>
</div>

<div id="app">
	<!-- 一般的写法 -->
	<h3>歌手：{{firstName + lastName + "双截棍" + "!"}}</h3>
</div>

2.计算属性写法举例

计算属性的例子：

<body>
		<div id="app">
			<h2>{{ name.split('').reverse().join('') }}</h2>
			<!-- 一般的写法 -->
			<h3>歌手：{{firstName + lastName + "双截棍" + "!"}}</h3>
			<!-- 计算属性的写法 -->
			<h3>{{fullName}}</h3>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					firstName:"周",
					lastName:"杰伦",
					name:"周杰伦"
				},
				computed: {
					fullName() {
		// 会将计算的结果进行缓存，只要this.firstName 和 this.lastName的内容不改变，
		//不会反复的进行计算，性能消耗低
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>

上面的例子声明了一个计算属性 fullName，提供的函数将用作属性app.fullName 的 getter 。

app.fullName 依赖于 app.firstName和app.lastName，在 app.firstName和app.lastName 发生改变时，app.fullName 也会更新。

3. computed vs methods

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

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

4. computed setter 和getter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ，学过OC的都应该对setter 和getter比较熟悉。

<script>
			var app = new Vue({
				el: "#app",
				data: {
					firstName: "周",
					lastName: "杰伦",
					name: "周杰伦"
				},
				computed: {
					fullName: {
						// 会将计算的结果进行缓存，只要this.firstName 和 this.lastName的内容不改变，
						//不会反复的进行计算，性能消耗低
						// getter
						get() {
							return this.firstName + this.lastName
						},
						// setter
						set(newValue) {
							var names = newValue.split('.')
							this.firstName = names[0]
							this.lastName = names[names.length - 1]
						}
					}
				},
			})
			app.fullName = '周.杰伦' //赋值就是调用setter方法
			document.write('firstName: ' + app.firstName);
			document.write('<br>');
			document.write('lastName: ' + app.lastName);
		</script>