vue.js计算属性computed和watch侦听_javascript 计算属性 watch-优快云博客

计算属性是基于它们的响应式依赖进行缓存的，当依赖属性没有发生关系时就不会多次调用函数。如果计算属性和侦听函数都可以实现相同效果，优先使用计算属性，会使代码更加简洁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{first + ' ' + last}}</div>
			<div>{{all}} ---all</div>			
			<div>{{allName}}----allName</div>			
			<div>{{full}}</div>			
		</div>
		<script>		
			let app = new Vue({
				el: '#app',
				data: {
					first: 'anna',
					last: 'Jack',
					full: 'anna Jack'
				},
				computed:{
					all (){
						return this.first + " " + this.last
					},
					allName: { //计算属性的get,set,默认调用get函数,当调用set函数时,传入改变后的值
						get(){
							return this.first + " " + this.last
						},
						set(val){
							let arr = val.split(' ')
							this.first = arr[0]
							this.last = arr[1]
						}
					}
				},
				watch: {
					//函数监听属性改变时传入两个值,一个改变前的值,一个时改变后的值,属性改变就调用监听函数
					first(newval,oldval){
						console.log(newval,oldval)
						this.full = this.first + '-' + this.last
					},
					last(newval,oldval){
						this.full = this.first +'-' + this.last
					}
				}
			})
		</script>
	</body>
</html>