<template>
<div>
<VueDeepWatch :objectValue="objectValue" :arrayValue="arrayValue" />
</div>
</template>
<script>
import VueDeepWatch from '@/components/vueDeepWatch.vue'
export default {
data () {
return {
objectValue: {
a: 1,
b: 2,
c: {
d: 3,
e: [ 4, 5 ]
}
},
arrayValue: [[1,2,3],{ a: 4, b: [5] }]
}
},
components: {
VueDeepWatch
}
}
</script>
<template>
<div>
{{ objectValue }}
<hr />
{{ arrayValue }}
</div>
</template>
<script>
export default {
props:[ 'objectValue', 'arrayValue' ],
data () {
return {
}
},
watch: {
objectValue: {
handler(newName){
console.log('objectValue', newName);
},
immediate: true,
deep:true
},
arrayValue: {
handler(newName){
console.log('arrayValue' ,newName);
},
immediate: true,
deep:true
}
},
components: {
}
}
</script>