计算属性和监视

最新推荐文章于 2025-09-08 16:53:14 发布

原创最新推荐文章于 2025-09-08 16:53:14 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

vue的学习专栏收录该内容

22 篇文章

订阅专栏

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

1.计算属性在computed属性对象中定义计算属性的方法在页面总使用{{方法名}}来显示计算的结果。
2.监视属性通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级通过getter/setter实现对属性数据的显示和监视计算属性存在缓存，多次读取只执行一次getter计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			姓：<input type="text" placeholder="first name" v-model="firstName"/>
			<br>
			名：<input type="text" placeholder="last name"  v-model="lastName" />
			<br>
			姓名(单向):<input type="text" placeholder="full name" v-model="fullName"/>
		    <br>
			姓名(单向):<input type="text" placeholder="full name" v-model="fullName2"/>
			<br>
			姓名(双向):<input type="text" placeholder="full name" v-model="fullName3"/>
			<p>{{fullName}}</p><!--计算属性存在缓存-->
			<p>{{fullName}}</p><!--不用再计算一次-->
		</div>
		
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#demo',
				data:{
					firstName:'a',
					lastName: 'b',
					fullName2: 'a b'
				},
				computed: {
					//什么时候执行？初始化显示相关的data属性数据发生改变
					fullName(){// 计算属性的 getter
						return this.firstName+' '+this.lastName;
					},
					fullName3:{
						//什么回调函数？1你定义的2你没有调用3最终他执行了
						get(){//回调函数 当需要读取当前属性的值时回调， 计算并返回当前属性的值
							return this.firstName+' '+this.lastName;

						},
						
						//回调函数,监视当前属性值的变化,当属性值改变时回调,更新相关的属性值
						set(value){//计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 
							const names = value.split( ' ');
							this.firstName = names[0];
							this.lastName = names[1];
							
						}				
					}
					
				},
				watch:{//配置监视
					firstName: function(value){//当firstName发生改变
						this.fullName2 = value + ' '+ this.lastName; //this指向Vue的实例对象,就是vm对象
			
					}
				}
			})
			
			vm.$watch('lastName',function(value){
				//更新fullName2
				this.fullName2 = this.firstName +  " " + value;
			})
		</script>
	</body>
</html>

理解计算属性：
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.fullName 依赖于 vm.firstName 和vm.lastName，因此当 vm.firstName 和vm.lastName发生改变时，所有依赖 vm.fullName的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性缓存 vs 方法

：
我们可以通过在表达式中调用方法来达到同样的效果。可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})