vue学习（四）计算属性和watch

最新推荐文章于 2024-04-18 14:33:53 发布

若往夕之

最新推荐文章于 2024-04-18 14:33:53 发布

阅读量908

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/java_chegnxuyuan/article/details/94559910

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.computed

computed计算属性是用来声明式的描述一个值依赖了其它的值,当你在模板里把数据绑定到一个计算属性上时.Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

<body>
		<div id="test">  			
  			<p>Original message: "{{ message }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage() }}"</p>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				message:'componentA'
			},
			computed:{
				reversedMessage:function(){
					return this.message+"hello";
				}
			},
			methods:{
				reversedMessage:function(){
					return this.message+"world"
				}
			}
		})
	</script>

computed能够实现的功能，基本上用函数也能够实现。但是对于computed来说。在上文中如果message没有发生变化。那么不会重新计算值。但是函数会每次都区重新计算数值。

需要特别注意的是：computed不能计算已经在data里面定义过的值。如下图会出现报错

<body>
		<div id="test">  			
  			<p>Original message: "{{ message }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage() }}"</p>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				message:'componentA',
				reversedMessage:'test'
			},
			computed:{
				reversedMessage:function(){
					return this.message+"hello";
				}
			},
			methods:{
				reversedMessage:function(){
					return this.message+"world"
				}
			}
		})
	</script>

2.watch

当我们修改firstname的值时，同时会将fullname的值修改。

<body>
		<div id="test">  			
  			<p>Original message: "{{ message }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage }}"</p>
  			<p>Computed reversed message: "{{ reversedMessage1() }}"</p>
  			<input type="" name="" id="" v-model="firstname" />
  			<p>fullname: "{{ fullname }}"</p>
		</div> 
	</body>
	
	<script>
		var app = new Vue({
			el: '#test',
			data:{
				message:'componentA',
				lastname:"",
				firstname:"",
				fullname:""
			},
			computed:{
				reversedMessage:function(){
					return this.message+"hello";
				}
			},
			methods:{
				reversedMessage1:function(){
					return this.message+"world"
				}
			},
			watch:{
				firstname:function(newVal, oldVal){
					this.fullname = this.lastname + " " + this.firstname
				}
			}
		})
	</script>

computed和watch的区别

https://www.cnblogs.com/gunelark/p/8492468.html这篇文章讲的比较清楚

若往夕之

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习（四）计算属性和watch

1.computedcomputed计算属性是用来声明式的描述一个值依赖了其它的值,当你在模板里把数据绑定到一个计算属性上时.Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。<body> <div id="...
复制链接

扫一扫