vue watch
<template>
<div class="app-container">
<el-select v-model="form.client_status" class="list_search_small" clearable placeholder="请选择">
<el-option v-for="item in client_status_info" :key="item.id" :label="item.name" :value="item.id"/>
</el-select>
<el-select v-model="form.worker_prefer" clearable class="list_search_small" placeholder="请选择">
<el-option v-for="item in client_status_info" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
form:{
client_status:"",
worker_prefer:''
},
client_status_info:[{id:1,name:'11111'},{id:2,name:'222222222'}],
}
},
created(){
},
computed: {
aaa(){
return JSON.parse(JSON.stringify(this.form)) //对象是引用类型,深拷贝一下,form变得时候就会触发计算属性,然后就会触发aaa,watch就会执行
}
},
watch:{
aaa:{//深度监听,可监听到对象、数组的变化
handler(val, oldVal){
console.log(val, oldVal);//但是这两个值打印出来却都是一样的
},
deep:true
}
},
methods: {
}
}
</script>
<style >
</style>
proxy
var data ={a:1,b:2222}
const b = new Proxy(data,{
get(data,val,ss){
console.log(data,val,ss)
},
set(data,val,ss){
console.log(data,val,ss,'ser,,,,,')
}
})