vue---计算属性，方法和侦听_vue计算属性和方法和监听-CSDN博客

本文链接：https://blog.csdn.net/qq_36132291/article/details/113063632

<!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>