计算属性和监听器

---

一、计算属性computed

• computed选项定义计算属性。
• 计算属性类似于methods选项中定义的函数。
• 计算属性会将数据进行缓存，只在相关响应式依赖数据发生改变时他们才会重新求值。而函数，每次都会执行函数体进行计算。
  举例：

<!-- 书写视图层-->
<div id='app'>
	<input type="text" v-model="firstName">
	+
	<input type="text" v-model="endName">
	=
	<input type="text" v-model="name">
	<button @click="changeObj">changeObj</button>
</div>

//创建vue实例化
const vm=new Vue({
	el:'#app',
	data:{
		firstName: '',
		endName: '',
		obj: {
			name: 'zs'
		}
	},
	computed: {
		// 计算属性中的属性不能再data中定义
		name: {
			get() {
				return this.firstName + '-' + this.endName
			},
            set(val) {
                console.log(val);
                console.log(val.split('-'));
                this.firstName = val.split('-')[0]
				this.endName = val.split('-')[1]
			}
		}
	},
	methods:{
		changeObj() {
			this.obj.name = 'ls';
		}
	}
})

二、监听器watch

• 监听data中属性的改变。
• 监听路由对象的改变。
• 第一个参数是新数据，第二个参数是旧数据。
  immediate：true 立即执行监听
  deep：true 深度监听
  举例：

<!-- 书写视图层-->
<div id='app'>
	<input type="text" v-model="firstName">
	+
	<input type="text" v-model="endName">
	=
	<input type="text" v-model="name">
	<button @click="changeObj">changeObj</button>
</div>

//创建vue实例化
const vm=new Vue({
	el:'#app',
	data:{
		firstName: '',
		endName: '',
		obj: {
			name: 'zs'
		}
	},
	computed: {
		// 计算属性中的属性不能再data中定义
		name: {
			get() {
				return this.firstName + '-' + this.endName
			},
            set(val) {
                console.log(val);
                console.log(val.split('-'));
                this.firstName = val.split('-')[0]
				this.endName = val.split('-')[1]
			}
		}
	},
	watch: {
		obj: {
			handler(val) {
				console.log(val);
			},
			deep: true
		},
		firstName: {
			handler(newVal, oldVal) {
				console.log(newVal);
				console.log(oldVal);
			},
			// 立即执行监听
			immediate: true,
			// 深度监听
			deep: true
		}
	},
	methods:{
		changeObj() {
			this.obj.name = 'ls';
		}
	}
})

三、methods、computed和watch的区别

第一点

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；

第二点

methods方法表示一个具体的操作，主要书写业务逻辑；

第三点

watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

---

总结

以上就是今天要讲的内容。