vue---计算属性，方法和侦听

最新推荐文章于 2025-04-23 11:38:43 发布

sunxya

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量97

点赞数

分类专栏： vue相关

本文链接：https://blog.youkuaiyun.com/qq_36132291/article/details/113063632

版权

vue相关专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用计算属性computed、方法methods和侦听器watch来动态更新组件状态。通过实例演示了如何组合它们来管理组件中的姓名和年龄，并了解各自的缓存机制和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{fullName}}
			{{age}}
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					firstName:'sun',
					lastName:'yiyi',
					fullName:'sunyiyi',//侦听器
					age:28
				},
				
				//1、计算属性computed---值是一个函数 
				//内置缓存机制，如果依赖的变量没发生改变的话，不会重新计算
				//计算属性的getter和setter
				computed:{
					fullName:{
						//初始化调用fullName 取值
						get:function(){
							return this.firstName+this.lastName
						},
						//set fullName 设置一个值时调用
						set:function(value){
							var arr=value.split(' ');
							this.firstName=arr[0]
							this.lastName=arr[1]
						}
					}
				},
				
				//2、方法methods也可实现计算属性功能 调用的时候是{{fullName()}}
				//相比于计算属性，无缓存机制存在
				methods:{
					fullName:function(){
						return this.firstName+this.lastName
				 	}
				},
				
				//3、侦听器watch---侦听firstName和lastName的变化
				//内置缓存机制，如果依赖的变量没发生改变的话，不会重新计算
				watch:{
					firstName:function(){
						this.fullName=this.firstName+this.lastName
					},
					lastName:function(){
						this.fullName=this.firstName+this.lastName
					}
				},
				
				//如果同一个功能computed,methods,watch都可以使用，优先使用computed
			})
		</script>
	</body>
</html>