70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<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> |