初识 Vue（09）---(计算属性、方法、侦听器)

最新推荐文章于 2023-03-15 08:36:53 发布

姜皓

最新推荐文章于 2023-03-15 08:36:53 发布

阅读量147

点赞数

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81253220

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

计算属性

计算属性的值是一个函数，并且是内置缓存的；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性、方法、侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
		{{age}}
	</div>
		
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			firstName:"Dell",
			lastName:"Lee",
			age:28
		},
		//计算属性
		computed:{
			fullName:function(){
				console.log("计算了一次")；
			return	this.firstName + " " + this.lastName
			}
		}
	})
	</script>
</body>
</html>

输出：

缓存机制：在本例中，计算属性为 fullName ,它依赖两个变量--firstName 和 lastName,当它依赖的变量没有发生任何改变的时候，计算属性就不会重新计算了，而用一直用上一次的计算结果，这样可以提高性能。（28已经变为27，但并没有“计算了一次”，依赖的值没有改变就不会再次计算）

依赖的值发生改变则再次计算

方法

示例：通过方法可以实现和上面同样的功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性、方法、侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName()}}
		{{age}}
	</div>
		
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			firstName:"Dell",
			lastName:"Lee",
			age:28
		},
		methods:{
			fullName:function(){
				console.log("计算了一次")；
				return this.firstName + " "+ this.lastName；
			}
		}

	})
	</script>
</body>
</html>

输出：

但方法中没有缓存机制，所以其性能不如计算属性

侦听器

侦听器通过侦听 firstName 和 lastName 的值是否发生变化，当发生变化时，就给 fullName 重新赋值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性、方法、侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		{{fullName()}}
		{{age}}
	</div>
		
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			firstName:"Dell",
			lastName:"Lee",
			fullName:"Dell Lee",
			age:28
		},
		watch:{
			firstName:function(){
				console.log("计算了一次")；
				this.fullName = this.firstName + " "+ this.lastName；
			},
			lastName:function(){
				console.log("计算了一次")；
				this.fullName = this.firstName + " "+ this.lastName；
			}
		}
	})
	</script>
</body>
</html>