5、计算属性computed

最新推荐文章于 2023-06-10 17:25:25 发布

hudongdongjava

最新推荐文章于 2023-06-10 17:25:25 发布

阅读量118

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/u012153127/article/details/111035899

版权

vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

computed

computed是一种基于响应式依赖进行缓存的。示例：

<body>
		<div id="app" v-bind:title="message">
			<div>{{random2}}</div>
			<div>{{random2}}</div>
			<div>{{random()}}</div>
			<div>{{random()}}</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				"el":"#app",
				computed:{
					random2:function() {
						return Math.random();
					}
				},
				methods:{
					random:function() {
						return Math.random();
					}
				}
			});
		</script>
	</body>

输出：

0.9472651306992299
0.9472651306992299
0.895105211141914
0.2601213679321581

从结果可以看出，计算属性里的random2在第二次调用的时候，会返回之前的结果。而methods里的random方法在调用的时候，都会返回新的值。那么computed的random2在什么情况下会返回新的值呢？答案就是当修改random2里prefix值的时候，会再一次计算。示例：

<body>
		<div id="app">
		</div>
		<script type="text/javascript">
			var app = new Vue({
				"el":"#app",
				data:{
					prefix:"time="
				},
				computed:{
					random2:function() {
						return this.prefix + Math.random();
					}
				},
				methods:{
					random:function() {
						return this.prefix + Math.random();
					}
				}
			});

			console.log(app.random2);
			console.log(app.random2)
			console.log(app.random());
			console.log(app.random());
			
			console.log("-----------");
			app.prefix = "time:";
			
			console.log(app.random2);
			console.log(app.random2)
			console.log(app.random());
			console.log(app.random());
		</script>
	</body>

控制台打印：

time=0.9769481348329911
time=0.9769481348329911
time=0.7013610338357816
time=0.7499808656103688
 -----------
time:0.5400807277397943
time:0.5400807277397943
time:0.9306663423885653
time:0.22180188769312004

由此可以看出，当我们修改prefix值后，再次调用random2方法的时候，值发生了变化，但是第二次调用依旧会返回之前的值。

hudongdongjava

关注

0
点赞
踩
0

收藏

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

computedcomputed是一种基于响应式依赖进行缓存的。示例：<body> <div id="app" v-bind:title="message"> <div>{{random2}}</div> <div>{{random2}}</div> <div>{{random()}}</div> <div>{{random()}}</div> <
复制链接

扫一扫