vue的计算属性和监听（1）

先简单了解一下用法

watch监听：

<template>
	<view class="all">
		<input type="text" v-model="value" placeholder="名字">
		<input type="text" v-model="list.name" placeholder="list">
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: -2,
				list: {
					name: 'hello'
				}
			}
		},
		watch: {
			value: {
				handler(newValue, oldValue) {
					console.log(newValue, oldValue);
				},
				immediate: true, //时刻监听值的变化，为false时，只有值变化才会监听
			},
			list: {
				handler(newVal, oldVal) {
					console.log(newVal.name, oldVal.name);
				},
				deep: true//深层监听，用于对象和数组的属性进行监听
			}
		}
	}
</script>
<style lang="scss" scoped>

</style>

computed计算属性：

<template>
	<view class="all">
		<input type="text" v-model="value" placeholder="名字">
		<input type="text" v-model="list.name" placeholder="list">
		<view class="">
			{{msg}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: -2,
				list: {
					name: 'hello'
				}
			}
		},
		computed: {
			// 计算属性的常规用法，一个新的属性，受多个值的依赖和影响，会返回新的值
			msg() {
				return this.value + this.list.name
			}
		}
	}
</script>
<style lang="scss" scoped>

</style>