<template>
	<ciy-header title="watch computed示例"></ciy-header>
	<view>
		<view class="ciy-card" style="padding:1em;">
			<view>compute: {{compute}}</view>
			<view>test: {{test}}</view>
			<view>tobj: {{tobj}}</view>
		</view>
		<view class="px2 py2">
			<button @tap="test='bbbb'">改变test=bbbb</button>
			<button @tap="test='ccc'">改变test=ccc</button>
			<button @tap="tobj.x=11.3">改变tobj.x</button>
			<button @tap="tobj.y=12">改变tobj.y</button>
			<button @tap="tobj={c:3,b:0}">改变tobj</button>
			<button @tap="tnor='aaaa'">改变tnor=aaaa</button>
			<button @tap="tnor='bbbb'">改变tnor=bbbb</button>
			<view v-for="item in log" :key="item">{{item}}</view>
		</view>
	</view>
</template>

<style>
</style>

<script>
	export default {
		data() {
			return {
				tnor: 'nnn',
				test: 'tt',
				tobj: {
					y: 34
				},
				log: []
			}
		},
		onLoad() {},
		watch: {
			tnor(newVal, oldval) {
				this.log.unshift('watch tnor:' + newVal + ',' + oldval);
			},
			test: {
				handler(newVal, oldval) {
					this.log.unshift('watch test:' + newVal + ',' + oldval);
				},
				immediate: true //立即执行一次
			},
			tobj: {
				handler(newVal, oldval) {
					this.log.unshift('watch tobj:' + JSON.stringify(newVal) + ',' + JSON.stringify(oldval));
				},
				deep: true, //同时监听obj子属性
				immediate: true
			},
			'tobj.y': { //监听某个属性，减少性能开销
				handler(newVal, oldval) {
					this.log.unshift('watch tobj.y:' + newVal + ',' + oldval);
				},
				immediate: true
			}
		},
		computed: {
			compute() {
				this.log.unshift('computed test:' + this.test);
				return 'computed-' + this.test;
			}
		},
		methods: {}
	}
</script>