【Vue.js】watch侦听器与computed计算属性的区别

最新推荐文章于 2024-07-30 18:36:42 发布

哇，女前端哎！

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量302

点赞数 1

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Handsome_gir/article/details/105615151

版权

Vue.js 专栏收录该内容

9 篇文章

订阅专栏

watch：当数据变化时执行异步或开销较大的操作(当数据一旦发生改变就会通知侦听器所绑定的方法)。
computed：必须要有返回值，基于他们的依赖进行缓存的，可以使模板内容更加简洁。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>watch与computed的区别</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!--watch侦听器-->
			<p>姓：<input type="text"  v-model="firstName"/></p>
			<p>名：<input type="text"  v-model="lastName"/></p>
			<p>{{fullName}}</p>
			
			<!--computed：计算属性-->
			<p>{{name}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					firstName:"李",
					lastName:"四",
					fullName:"李四"
				},
				//计算属性：必须要有返回值，基于他们的依赖进行缓存的
				computed:{
					name:function(){
						return this.firstName+this.lastName;
					}
				},
				//侦听器：当数据变化时执行异步或开销较大的操作(当数据一旦发生改变就会通知侦听器所绑定的方法)
				watch:{
					firstName:function(val){
						this.fullName=val+this.lastName;
					},
					lastName:function(val){
						this.fullName=this.firstName+val;
					}
				}
			});
		</script>
	</body>
</html>