Vue 3 - 08 计算属性

Vue3 计算属性

计算属性关键词: computed.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue 计算属性</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<p>原始数据:{{ message }}</p>
		<p>反转数据:{{ reversedMessage }}</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				message: "Good day."
			}
		},
		computed: {
			reversedMessage: function() {
				return this.message.split('').reverse().join('');
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

computed setter 属性值设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue 计算属性</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<p>名称:{{ name }}</p>
		<p>链接:{{ url }}</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				name: "百度",
				url: "https://baidu.com",
			}
		},
		computed: {
			site: {
				// getter
				get: function() {
					return this.name + '' +  this.url
				},
				set: function(v) {
					let param = v.split(' ')
					this.name = param[0]
					this.url = param[param.length -1]
				}
			}
		
		}
	}
	let root = Vue.createApp(app).mount("#app");
	root.site = '谷歌 https://google.com';
</script>
</html>

computed和methods的区别

通常我们把需要计算的方法写在computed里,但是大部分情况下,写在methods里也可以实现需求。

1,计算属性computed,包含有getter和setter方法
2,写在computed里的方法,在无论调用多少次,方法只其实只会执行一次。而写在methods里的方法,每一次调用,方法都会执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue 计算属性</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
	    <h2>{{getFullName()}}</h2>
	    <h2>{{getFullName()}}</h2>
	    <h2>{{getFullName()}}</h2>
	    <h2>{{getFullName()}}</h2>

	    <h2>{{fullName}}</h2>
	    <h2>{{fullName}}</h2>
	    <h2>{{fullName}}</h2>
	    <h2>{{fullName}}</h2>   
	</div>
</body>
<script>

	const app = {
		data() {
			return {
				firstName: "Jim",
				lastName: "Green"
			}
		},
		methods:{
			getFullName:function(){
                console.log("getfullName"); //控制台输出4次
                return this.firstName+" "+this.lastName;
            }
		},
        computed:{
            fullName:function(){
                console.log("fullName") //控制台仅输出1次
                return this.firstName+" "+this.lastName;
            }
        }
	}

	Vue.createApp(app).mount("#app");
</script>
</html>

结果可见,methods里的方法共调用了4次,而computed里的方法只调用了一次。computed是比methods的性能要高。这是因为vue内部对computed做了缓存,它会观察计算属性的各个变量是否发生变化,如果都没有发生变化,就不再执行计算,直接把第一次计算的值返回。只有监测到属性值发生变化的时候,才会重新执行计算。而methods则会每次都重新计算,所以来说methods里计算相对性能较低。

推荐阅读