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

最新推荐文章于 2022-12-01 10:38:57 发布

Start_t

最新推荐文章于 2022-12-01 10:38:57 发布

阅读量527

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Start_t/article/details/102332887

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

Start_t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中计算属性computed与属性检测watch的区别

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

扫一扫

专栏目录