vue中计算属性computed与属性检测watch的区别

最新推荐文章于 2025-09-12 19:01:05 发布

原创最新推荐文章于 2025-09-12 19:01:05 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨Vue框架中computed与watch的特性与区别，包括它们的运行时机、使用场景及内部实现机制。通过实例代码展示如何有效利用计算属性与属性检测进行数据处理和响应式更新。

Vue中computed与watch的区别

- 计算属性
- 属性检测

计算属性computed	属性检测watch
首次运行	首次不运行
调用时需要在模板中渲染，修改计算所依赖元数据	调用时只需修改元数据
默认深度依赖	默认浅度观测
适合做筛选，不可异步	适合做执行异步或开销较大的操作

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>计算属性</h3>
			<!-- 元属性 -->
			<div>{{str}}</div>
			<!-- 计算属性 -->
			<!-- <div>{{cptStr}}</div> 要放在模板中渲染才可以调用-->
			<div>{{cptStr}}</div>
		</div>
	</body>
	<script>
		let vm = new Vue({
			el:'#app',
			//元属性
			data:{
				str:'hello world',
			},
			computed:{
				// key(计算属性):value(fn)
				cptStr:function(){
					console.log('计算属性运行了')
					//计算业务
					// return '计算后的值'		//计算后的值
					return this.str			//hello world
				}
			}
		})
	</script>
</html>

属性检测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<!-- data,commuted,watch都会被加到响应式系统中 -->
		<div id="app">
			{{str}}
			<!-- {{cptStr}} -->
		</div>
	</body>
	<script>
		let vm = new Vue({
			el:'#app',
			//元属性
			data:{
				str:'hello world',
				json:{a:1,b:2}
			},
			methods:{
				fn(current,prev){
					console.log('数据观测触发的方法',current,prev);
					// console.log('this默认全部指向vm',this);
				}
			},
			computed:{
				cptStr(){
					this.str;
					// this.json;
					// console.log('this默认全部指向vm',this)
					console.log('计算属性运行')
					// return this.json.a+this.str
					// return this.str+1;
					setTimeout(()=>this.str+=1,1000)
				}
			},
			watch:{
				str(current,prev){
					console.log('数据观测运行',current,prev);
					setTimeout(()=>this.str+=100,2000)
				}
				// str:"fn",
				// json:"fn",
				// str:{
				/* json:{
					handler(current,prev){
						console.log('数据观测运行',current,prev)
					},
					immediate:true,		//首次运行
					deep:true,		//深度观测
				} */
			}
		})
	</script>
</html>