计算属性 watch

最新推荐文章于 2023-01-08 09:41:55 发布

albert48

最新推荐文章于 2023-01-08 09:41:55 发布

阅读量95

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/albert48/article/details/103396393

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="app">{{fullName}}{{age}}</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				firstName:'shengtong',
				lastName:'zhu',
				age:21
			},
			computed:{
				fullName(){
					console.log("computed");
					return this.firstName+' '+this.lastName;
				}
			}
		})
	</script>

</body>
</html>

计算属性会进行缓存，如果依赖的值没有发生变化，那么他不会重新进行计算，而是使用缓存的值。
通过定义一个方法也可以实现同样的功能，但是定义的方法没有缓存。

<!DOCTYPE html>
<html>
<head>
	<title</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="app">{{fullName}}{{age}}</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				firstName:'shengtong',
				lastName:'zhu',
				fullName:'shengtong zhu',
				age:21
			},
			watch:{
				firstName(){
					this.fullName=this.firstName+' '+this.lastName;
				},
				lastName(){
					this.fullName=this.firstName+' '+this.lastName;
				}
			}
		})
	</script>

</body>
</html>

watch也有缓存，如果修改和监听的属性不相关的属性的话，就不会重新调用。

albert48

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性 watch

<!DOCTYPE html><html><head> <title</title> <script src="./vue.js"></script></head><body> <div id="app">{{fullName}}{{age}}</div>...
复制链接

扫一扫